Contrôle de formulaire à l'aide de col-md-6 espacement lorsque la fenêtre d'affichage limitée avec bootstrap 3

Je suis le déplacement d'un formulaire que j'ai écrit dans le bootstrap 2 partout à responsive bootstrap 3.

Lors de la grande grille est affichée, il est agréable de l'espacement entre tous les éléments. Ci-dessous fonctionne bien pour les grandes fenêtres:

Lorsque la fenêtre est réduite et de petites grille de support sélectionné, firstName et lastName envelopper comme prévu, mais il semble laid comme il n'y a pas d'espace entre ces deux lignes (comme pour l'adresse e-mail et nom de l'organisme):

Comment puis-je faire de l'égalité de l'espacement entre tous les éléments de la même entre les petites et les grandes grilles, et en particulier la cible de la hauteur entre col-sm-12 éléments au sein d'un form-group (comme nous l'avons avec firstName et lastName)?

Mon code est ci-dessous et jsfiddle est ici:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-md-12"><label class="control-label">Billing Contact</label></div>
    </div>
    <div class="form-group">
        <div class="col-md-6 col-sm-12"><input id="firstName" class="form-control" type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', attr: { placeholder: 'First Name' }" /></div>
        <div class="col-md-6 col-sm-12"><input id="lastName" class="form-control" type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Last Name' }" /></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><input id="emailAddress" class="form-control" type="text" data-bind="value: emailAddress, valueUpdate: 'afterkeydown', attr: { placeholder: 'E-mail Address' }" /></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><input id="companyName" class="form-control" type="text" data-bind="value: companyName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Company Name' }" /></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><label class="control-label">Billing Address</label></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><input id="address1" class="form-control" type="text" data-bind="value: address1, valueUpdate: 'afterkeydown', attr: { placeholder: 'Street Address' }" /></div>
    </div>
</form>

Je ne pense pas qu'il y a une classe de Bootstrap vous pouvez utiliser pour cela.

InformationsquelleAutor g18c | 2013-08-30

4

Avec les CSS et les demandes des Médias:
```
@media (max-width: 991px)
{    
    .form-group .col-sm-12:first-child{margin-bottom:15px;} 
}   
```
- Requête de média travaillé, j'ai fini par utiliser: @media (max-width: 991px){ .form-group .col-xs-12{margin-bottom:15px;} .form-group .col-xs-12:last-child{margin-bottom:0;} } Une petite question cependant, au lieu d'utiliser absolue 991px, il n'est pas moins variable pour cette grille que je pouvais référence à la place?
- est 991px dans des variables.moins
InformationsquelleAutor Bass Jobsen

Est-il une raison particulière pour laquelle vous ne voulez pas ajouter de marge-vous? Parce que vous pouvez cibler toutes les colonnes avec un simple sélecteur css si vous donnez à votre form-group un id de sélectionner avec plus de précision. Ci-dessous l'extrait de code et vous pouvez vérifier la résultat et en ligne extrait de ainsi.

HTML

    <form class="form-horizontal" role="form">
        <div class="form-group" id="main-form">
            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
            </div>
        </div>
    </form>

CSS

#main-form > [class^="col-"] { /* This will grab all the elements with classes that start with "col-" and that are the immediate children of #main-form. */
    margin-bottom: 20px;
    /* or the value of your bootstrap's gutter width so that you can have a nice consistent margin between elements*/
}

InformationsquelleAutor AJ Meyghani

Une solution pour moi est:

<div class="form-group">
    <div class="col-md-6 col-sm-12"><input id="firstName" class="form-control" type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', attr: { placeholder: 'First Name' }" /></div>
    <div class="clearfix mb-1 hidden-md-up"></div> <!-- this block -->
    <div class="col-md-6 col-sm-12"><input id="lastName" class="form-control" type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Last Name' }" /></div>
</div>

Le truc, c'est de siffler une marge entre les entrées juste au moment où à la fois le changement de largeur.

InformationsquelleAutor xhostar

Vous devez vous connecter pour publier un commentaire.