Twitter Bootstrap 3 Inline Forme avec des étiquettes

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

Lorsque l'utilisateur dispose d'un large écran:

 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 initialement met tous les champs dans une ligne et si il ne correspond pas aux contrôles de saut à la ligne suivante, mais le maintien du Label + Champ.

Aussi si il y a une manière de sorte que l'espacement entre chaque Étiquette + Entrée est plus grand que l'espacement entre l'Étiquette et de son Domaine.

Et enfin si il y a un moyen d'avoir plus de marge verticale entre l'Étiquette + Champ quand il passe à la ligne suivante.

InformationsquelleAutor VSP | 2014-02-21

Option #1 : colonnes fixes

Vous pouvez utiliser une structure de mélange 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 fixer label/input tailles 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 d'un peu de 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.

Twitter Bootstrap 3 Inline Forme avec des étiquettes

Bootply

Option #2 : liquide colonnes

Pour être en mesure de ne pas s'occuper 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 de 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;
}

Twitter Bootstrap 3 Inline Forme avec des étiquettes

Bootply

N'est pas là une façon, donc, je wouldnt ont pour prévoir le nombre d'éléments qu'il va tenir dans chaque ligne? Aussi, si j'essaie de rendre le Bouton Soumettre plus petite, il disaligns du reste de champs
Pour le bouton envoyer : faire le col + offset + push égale à 12 : col-xs-8 col-xs-offset-4, ou col-xs-4 col-xs-offset-8, etc... Pour obtenir un automatique de la grille, voir mon edit.
Vous, monsieur, êtes un magicien :). La deuxième option était juste ce que je cherchais. Comme une note, j'ai vu que la "forme" n'est pas présent dans le bootstrap 3. Aussi maintenant, je dois mettre css personnalisé épaisseurs pour les contrôles, comme le col-xs classes utilise % des largeurs qui ne fonctionnent pas dans votre 2º bootply. Je vais utiliser le deuxième exemple, avec quelques modifications: bootply.com/117291 des suggestions?
Des Suggestions au sujet de ? Vous semble suivre le droit ptah ! Je voudrais juste éviter la double col-xs-offset-1 (en fait, je voudrais utiliser col-sm-offset-1 au lieu de cela, pour avoir plus de place sur les appareils mobiles). Et vous ne devriez pas utiliser control-label si vous souhaitez que vos étiquettes de flotter près de vos entrées.
Merci, le décalage est significatif lorsqu'il est combiné avec le reste de notre site web. J'ai utilisé le contrôle de l'étiquette afin que je puisse le style en plus précisément, dans le cas où nous sommes en fin d'avoir plus de l'étiquette à côté de l'entrée ou le remplacement un (pour readonly info champs)
J'ai copié l'un des groupes se forment et collé dans mon formulaire, mais il apparaît encore sur des lignes différentes. Pourquoi?
Grande réponse. Toutes les idées pour si vous voulez faire un double de la colonne (c'est à dire un textarea) avec la première solution? Idéalement, l'étiquette de la ligne et le côté droit de la zone de texte aussi bien. Il suffit de changer de xs-12 et 2, 10 largeurs de colonne qui vous rapproche mais ce n'est pas exact.

InformationsquelleAutor zessx

Le même que pour l'option #1 @zessx, mais sans écraser les CSS. On aligne les étiquettes vers la droite pour augmenter l'espace entre les étiquettes de contrôle de paires. Catégorie "médias" est là pour ajouter de la marge supérieure sans créer une classe personnalisée, mais dans le cas général, il est préférable d'avoir un programme personnalisé.

<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

InformationsquelleAutor Mark Meyerovich

1

Bien, j'ai joué avec le système de grille et c'est aussi proche que j'ai pu obtenir pour votre installation.
```
<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 deux champs. Vous souhaiterez peut-être modifier la col classes pour s'adapter à votre disposition.

jsFiddle
- Mais dans votre exemple, si je ajuster la largeur de la fenêtre de la 2º label + input ne pas aller à la ligne ci-dessous. Prendre en compte qu'il pourrait avoir 3, 4 ou même plus de paires d'étiquettes + entrée qui doivent s'ajuster à une ou plusieurs lignes en fonction de la largeur disponible.
- Comme je l'ai dit, vous aurez à régler la col classes pour s'adapter au nombre d'éléments. Vous ne serez pas en mesure de créer quelque chose de si dynamique avec bootstrap seulement. Vous devez recourir à certaines JavaScript ou CSS personnalisé dans le but d'atteindre.
- Mes plus proches tente où avec getbootstrap.com/css/#forms-inline au lieu du col classes que vous n'avez pas à définir le nombre d'éléments dans chaque ligne...le problème est d'obtenir les étiquettes + entrée ensemble après un saut à la ligne suivante et de les aligner en suivant les lignes correctement
InformationsquelleAutor bukka
1

Je voudrais proposer quelque chose de complètement différent, envelopper les étiquettes et les champs à l'intérieur inline divs:
```
<div style="display:inline-block"> 
Label:input
</div>
```
De cette façon, quand ils sont sur le point de rompre, ils cassent en paires, les étiquettes+entrées.

InformationsquelleAutor scooterlord

Vous pouvez essayer ci-dessous

De travail 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>

InformationsquelleAutor Abhineet

La façon la plus simple est de mettre à la fois de l'étiquette et de la saisie de texte dans les cols, div. Espérons que ce sera du temps de gagner pour 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>

InformationsquelleAutor Talha

Vous devez vous connecter pour publier un commentaire.