web-dev-qa-db-de.com

Twitter Bootstrap-Inline-Formabstand

Hier ist eine JSFiddle, die meinen Code in Aktion zeigt.

Ich möchte ein paar Pixel Abstand zwischen den verschiedenen Teilen des Formulars hinzufügen, indem ich Twitter Bootstrap 3 unter Berücksichtigung der Reaktionsfähigkeit auf die richtige Weise benutze. Ich habe die Dokumentation durchgesehen, aber mir ist immer noch nicht klar, wie dies am besten erreicht werden kann.

Irgendwelche Ideen?

Hier ist mein aktuelles Formular HTML:

<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

Sie können mit margin alle direkten Kinder von .form-inline versuchen:

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

Diese Geige anzeigen http://jsfiddle.net/MFKBj/10/

PD: Ich füge nur !important in der Geige hinzu, um sicherzugehen, dass über dem Bootstrap-CSS dies nicht erforderlich ist. 

35
DaniP

Hier ist ein Beispiel für die Verwendung des Bootstrap-Grid-Systems. Sie können eine Reihe von Klassen anwenden, um die verschiedenen Ansichtsfenster zu bearbeiten.

<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

Ich hatte die gleiche Frage wie das OP - er fragt nach horizontalem Abstand - BS zerschlägt die Dinge ziemlich gut wie hier . Hier ist meine Lösung:

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

In Bootstrap 4 haben Sie die Dienstprogramme Spacing .

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

In Bootstrap 3 können Sie die Elemente wie folgt in einen div.form-group einschließen:

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

Dies können Sie in diesem Abschnitt der Dokumentation zu Bootstrap 3 sehen: 

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

1
Richard Jones

So habe ich es gemacht; Fügen Sie allen Beschriftungen und Steuerelementen einen minimalen Abstand hinzu, und verwenden Sie einen negativen Rand im Container, um alles richtig ausgerichtet zu halten.

.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