web-dev-qa-db-fra.com

Twitter Bootstrap 3 Formulaire en ligne avec étiquettes

Après avoir cherché partout, je ne pouvais pas voir exactement comment je peux concevoir un formulaire en ligne qui a la conception suivante: (en utilisant bootstrap 3 classes au lieu de personnalisations CSS lorsque cela est possible)

Lorsque l'utilisateur a un écran large:

 Form-Legend

     LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   LabelFieldC: InputFieldC   <Submit Button>

Lorsque l'utilisateur a un écran plus petit:

Form-Legend

    LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   

    LabelFieldC: InputFieldC   <Submit Button>

L'idée est que la conception rassemble initialement tous les champs sur une seule ligne et si elle ne correspond pas, les contrôles passeraient à la ligne suivante, mais en maintenant ensemble le Label + Champ.

De plus, s'il existe un moyen pour que l'espacement entre chaque étiquette + entrée soit supérieur à l'espacement entre l'étiquette et son champ.

Et enfin s'il existe un moyen d'avoir plus de marge verticale entre le Label + Field lorsqu'il passe à la ligne suivante.

htmlcsstwitter-bootstraptwitter-bootstrap-3
29
VSP

Option # 1: colonnes fixes

Vous pouvez utiliser une structure mélangeant col-xs-12, col-sm-6 et col-lg-3 pour obtenir 1, 2 ou 4 colonnes. À l'intérieur de votre form-group, n'oubliez pas de corriger les tailles d'étiquette/d'entrée avec col-xs-4 et col-xs-8:

<div class="container">
  <form class="form form-inline" role="form">

    <legend>Form legend</legend>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldA" class="col-xs-4">Field A</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldB" class="col-xs-4">Field B</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldC" class="col-xs-4">Field C</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
    <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>

  </form>
</div>

Vous avez encore besoin de quelques CSS:

// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
    padding-left: 0;
    padding-right: 0;
}
// vertical align label
.form-inline label {
    line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
    width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
  .form-inline .form-group {
    margin-bottom: 15px;
  }
}

Vous pouvez ajouter autant d'entrées que vous le souhaitez.

enter image description here

( Bootply

Option n ° 2: colonnes de fluides

Pour ne pas se soucier du nombre de champs par ligne, vous pouvez utiliser cette structure:

<div class="container">
  <form class="form form-inline form-multiline" role="form">

    <legend>Form legend</legend>

    <div class="form-group">
      <label for="InputFieldA">Field A</label>
      <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
    </div>

    <div class="form-group">
      <label for="InputFieldB">Very Long Label For Field B</label>
      <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
    </div>

    <div class="form-group">
      <label for="InputFieldC">F. C</label>
      <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
    </div>

    <div class="form-group">
      <label for="InputFieldD">Very Long Label For Field D</label>
      <input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
    </div>

    <div class="form-group">
      <label for="InputFieldE">Very Long Label For Field E</label>
      <input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
    </div>

    <div class="form-group">
      <label for="InputFieldF">Field F</label>
      <input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit Button</button>
    </div>

  </form>
</div>

Et quelques lignes CSS pour fixer les marges:

.form-multiline .form-group {
    margin-bottom: 15px;
    margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
    margin-right: 15px;
}

enter image description here

( Bootply

57
zessx

Identique à l'option # 1 de @zessx, mais sans surcharger CSS. Celui-ci aligne également les étiquettes vers la droite pour augmenter l'espace entre les paires étiquette-contrôle. La classe "media" est là pour ajouter une marge supérieure sans créer de classe personnalisée, mais en général, il vaut mieux en avoir une personnalisée.

<div class="form-horizontal">
    <legend>Form legend</legend>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>
</div>

Bootply

4
Mark Meyerovich

D'accord, j'ai joué avec le système de grille et c'est aussi proche que possible de votre configuration.

<div class="container">
    <form role="form" class="form-horizontal">
        <div class="form-group col-sm-5">
            <label for="inputPassword" class="col-xs-4 control-label">Email</label>
            <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
            </div>
        </div>
        <div class="form-group col-sm-5">
            <label for="inputPassword" class="col-xs-4 control-label">Password</label>
            <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
            </div>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

Cela a seulement deux champs. Vous souhaiterez peut-être modifier les classes col pour les adapter à votre disposition.

jsFiddle

1
bukka

Vous pouvez essayer ci-dessous

Travailler ici - http://www.bootply.com/117807

<div class="container">
<div class="row">
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
  </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
    </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
    </div>
  </div>

  </div>
</div>
1
Abhineet

Le moyen le plus simple est de mettre à la fois le libellé et la saisie de texte dans cols div. J'espère que cela fera gagner du temps à tous les autres :)

<div class="col-md-3 text-right">
   <label>City</label>
</div>
<div class="col-md-3 text-right">
     <asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>
1
Talha

Je proposerais quelque chose de complètement différent, envelopper les étiquettes et les champs à l'intérieur des divs en ligne:

<div style="display:inline-block"> 
  Label:input
</div>

De cette façon, lorsqu'ils sont sur le point de casser, ils se cassent par paires, étiquettes + entrées.

1
scooterlord