Comment rendre les étiquettes de forme horizontale de Bootstrap plus petites avec CSS?

Bootstrap a beaucoup de des exemples de types de formes. Je suis intéressé par l'aide de la "forme Horizontale" qui ressemble à ce

Image.png http://img35.imageshack.us/img35/244/picturebm.png

C'est à quoi il ressemble après avoir décrit quelques éléments avec l'inspecteur web de la barre d'outils:

L'image 2.png http://img594.imageshack.us/img594/4681/picture2yn.png

Je suis en train de travailler à l'intérieur d'une popup modal et de l'espace est déjà un peu serré. J'ai essayé d'ajouter du bootstrap système de grille de .span1 et .span2 pour les étiquettes de la classe, mais il ne donne pas le comportement souhaité.

Est-il un moyen d'utiliser un autre aspect de bootstrap pour obtenir le comportement souhaité (c'est à dire de serrer la quantité d'espace que les étiquettes sur une surface horizontale formulaire de participation)? Quelle est la bonne façon de le faire? Je suis en utilisant bootstrap version 2.1

source d'informationauteur cwd

  1. 12

    je ne suis pas au courant si bootstrap a quelque chose de défini pour elle..ci-dessous est une solution de contournement..

    <div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>

    j'ai ajouté style="width:auto" qui était par défaut 140px et style="margin-left:auto" qui était par défaut 160px. Aussi class="input-small" à réduire le champ de saisie de la largeur de serrer de plus d'espace, de sorte qu'il s'adapte en modal..

    Maintenant, vous tweak suite à l'adapter en fonction de vos besoins..

  2. 0

    Pour réduire l'espacement vertical, form-control-sm réduit la taille de police (à l'aide de Bootstrap 4):

    <form>
  <div class="form-group form-row">
    <label class="col-sm-2 col-form-label form-control-sm">Label</label>
    <div class="col-sm-3">
      <input class="form-control form-control-sm">
    </div>
  </div>
</form>