Mettre les contrôles de formulaire dans une barre de navigation

Jouer avec Bootstrap 2.0, je ne pouvais pas mettre form controls dans un navbar bien. Le évident de deviner met la boîte de recherche trop élevé.

Comment puis-je réparer mon violon?

Eh bien, si vous l'envelopper comme ça, ce n'est pas aussi proche du sommet, cependant, la barre devient de plus? jsfiddle.net/7J7cz/13, c'Est que plus près de ce que vous voulez?
Hum. Sur mon écran (Google Chrome pour Mac) sur le bouton de recherche s'affiche sur deux lignes...
Je peux reproduire l'erreur ici sur google Chrome pour Windows. Firefox affiche sur une seule ligne. Permettez-moi de voir si je peux corriger ça.

OriginalL'auteur Randomblue | 2012-02-03

  1. 13

    si vous placez ce dans la .la valeur liquidative .conteneur:

    <form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

    Vous obtenez une jolie zone de recherche: http://jsfiddle.net/p4eAN/1/

    Si vous souhaitez aligner la barre de recherche sur le côté droit de modifier le "pull-left "classe" pull-right"

    -mise à jour-
    Combinez le avec les balises input et ajouter un tout petit peu de css: http://jsfiddle.net/7J7cz/56/

    .navbar-search .input-prepend {
  margin-bottom: 0;
}

    -update2-
    Ajout d'un float:droit à l'entrée, il les corrige Chrome, Firefox fonctionnait et fonctionne toujours: http://jsfiddle.net/7J7cz/57/

    Je veux utiliser contrôles de formulaire, pas navbar-search.
    Vous pouvez toujours utiliser le <form> étiquette avec les classes connexes comme ceci: jsfiddle.net/7J7cz/56
    Ne fonctionne pas. Au moins pas dans Google Chrome.
    jsfiddle.net/7J7cz/57 Ajouté un float:droit à l'entrée, il les corrige Chrome, Firefox fonctionnait et fonctionne toujours.
    J'ai dû ajouter un float:left; à l'span style pour qu'il fonctionne dans Chrome.

    OriginalL'auteur ahmeij

  2. 2

    Vérifier cela 

            <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <form class="navbar-form form-inline">
                        <select id="selectbasic" name="selectbasic" style="margin-left: 5px;" class="input-medium">
                          <option selected>Buy</option>
                          <option>Rent</option>
                        </select>

                        <input type="text" class="input-xlarge" required=""  placeholder = "Enter Location">

                        <select id="selectbasic" name="selectbasic" class="span3">
                          <option selected>Property Type</option>
                          <option>Option two</option>
                        </select>

                        <select id="selectbasic" name="selectbasic" class="input-small">
                          <option selected>Bedroom</option>
                          <option>Option two</option>
                        </select>

                        <select id="selectbasic" name="selectbasic" class="input-small">
                          <option>Bathroom</option>
                          <option>Option two</option>
                        </select> 

                        <button type="submit" class="btn btn-success">Search</button>
                        <a href="#" class="adv-search" data-id="<?php echo $fetch['stu_id']; ?>" title="Advance Search"><button class="btn" type="button" style="margin-left:10px;" ><i class="icon-th-list"></i></button></a>
                    </form>
                 </div>
            </div>
        </div><!-- /.navbar -->
    Cela a fonctionné pour moi!

    OriginalL'auteur JackLB

  3. 0

    la classe active de l'élément li a un trou au fond
    Article 1

    OriginalL'auteur ramon22