web-dev-qa-db-fra.com

Espacement des formulaires en ligne Twitter Bootstrap

Voici un JSFiddle montrant mon code en action.

Je souhaite ajouter quelques pixels d'espacement entre les différentes parties du formulaire de la manière la plus correcte en utilisant Twitter Bootstrap 3, en tenant compte de la réactivité. J'ai parcouru la documentation, mais je ne vois toujours pas quel est le meilleur moyen d'y parvenir.

Des idées?

Voici mon formulaire HTML actuel:

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="timezone">Timezone</label>
    <select class="form-control" id="timezone" name="timezone">
      <option value="America/St_Lucia">America/St_Lucia</option>
      <option value="Europe/Nicosia">Europe/Nicosia</option>
    </select>
  </div>

  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>

  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>

  <button class="btn" type="submit">Save</button>
</form>
htmlcsshtml5twitter-bootstrapresponsive-design
27
Peter Sampras

Vous pouvez essayer avec margin à tous les enfants directs de .form-inline:

.form-inline > * {
   margin:5px 3px;
}

Voir ce violon http://jsfiddle.net/MFKBj/10/

PD: J'ajoute seulement !important dans le violon pour m'assurer que c'est fini du CSS d'amorçage que vous n'en avez pas besoin. 

35
DaniP

Voici un exemple d'utilisation du système Bootstrap Grid. Vous pouvez appliquer un groupe de classes pour gérer les différentes fenêtres.

<form class="form-inline" role="form">
  <div class="form-group row">
    <div class="col-md-6">
      <label class="sr-only" for="timezone">Timezone</label>
      <select class="form-control" id="timezone" name="timezone">
        <option value="America/St_Lucia">America/St_Lucia</option>
        <option value="Europe/Nicosia">Europe/Nicosia</option>
      </select>
    </div>
    <div class="col-md-3"">
      <label class="radio-inline">
        <input id="timeformat-0" name="timeformat" value="24" type="radio" />
        19:00
      </label>
    </div>
    <div class="col-md-3">
      <label class="radio-inline">
        <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
        7:00 PM
      </label>
    </div>
    <button class="btn" type="submit">Save</button>
  </div>
</form>
6
meavo

J'avais la même question que le PO - il demande s'il faut espacer les choses horizontalement - BS les assemble assez bien comme on le voit ici Voici ma solution:

.form-inline label {
    margin-left: 5px;
}
3
Scott

Dans Bootstrap 4, vous avez les utilitaires Spacing .

<div class="row">
    <div class="col-sm-6 mb-lg-2">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>
1
kR105

Dans Bootstrap 3, vous pouvez envelopper les éléments dans un div.form-group, comme ceci:

<div class="form-group">
  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>
</div>

<div class="form-group">
  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>
</div>

Vous pouvez le voir dans cette section de la documentation Bootstrap 3: 

https://getbootstrap.com/docs/3.3/css/#forms-inline

1
Richard Jones

Voici comment je l'ai fait. ajoutez un espacement minimal à toutes les étiquettes et tous les contrôles et utilisez une marge négative sur le conteneur pour que tout soit correctement aligné.

.form-inline {
    margin: 0 -3px;
}

.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select {
    margin: 0 3px;
}
0
Matthew Hudson