bootstrap alignement horizontal de former des groupes de contrôle

J'ai deux contrôles de formulaire avec des étiquettes. Je veux les étiquettes apparaissent au-dessus des commandes, mais les contrôles apparaissent à côté les uns des autres. Je peux comprendre la façon de faire l'un ou l'autre, mais pas les deux.

J'ai actuellement

<div class="control-group">
    <label class="control-label" for="select1">Select1</label>

    <div class="controls">
        <select id="select1">
            <option value="abc">ABC</option>
            <option value="def">DEF</option>
        </select>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="text1">Text1</label>

    <div class="controls">
        <input id="text1"/>
    </div>
</div>

Le jsfiddle est http://jsfiddle.net/BA4g7/

Comment puis-je faire les deux groupes de contrôle alignés horizontalement les uns avec les autres? Dois-je les mettre dans une rangée?

OriginalL'auteur Jeff Storey | 2013-06-21

  1. 4

    Cela semble correct:

    .control-group {
    display: inline-block;
    vertical-align: top;
}

    Toutefois, si vous voulez qu'il soit garanti de rester sur la ligne (et pas sur le point de conclure avec d'étroites largeurs d'écran), alors vous avez besoin de l'envelopper dans un autre div et définir white-space: nowrap, comme cet exemple.

    Aussi, si vous voulez regarder mieux, vous aurez besoin de jouer avec certains de dimensionnement sur la saisie de texte, quelque chose comme ce qui semble bon dans mon navigateur FF:

    #text1 {
    height: 20px;
    padding: 4px 0;
}

    OriginalL'auteur ScottS

  2. 0

    Je pense que la meilleure façon est d'ajouter une classe css personnalisé dans votre css externe, qui sont chargés après bootstrap, pour écraser la classe native et que vous souhaitez modifier. Personnellement je le fais chaque fois que j'utilise bootstrap.

    J'ai donc créer cette classe pour résoudre le problème

    .makeHorizontal{
  float:left;
  padding-left:20px;
}

    Démonstration en direct ici.

    OriginalL'auteur rkpasia