Межстрочный интервал между бутстрапом Twitter

Вот JSFiddle, показывающий мой код в действии.

Я хочу добавить несколько пикселей промежутка между различными частями формы наиболее правильным способом, используя Twitter Bootstrap 3, учитывая отзывчивость. Я просмотрел документацию, но мне все еще не ясно, какой лучший способ это сделать.

Любые идеи?

Вот моя текущая форма 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>

Ответы

Ответ 1

Вы можете попробовать с margin для всех прямых детей .form-inline:

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

Посмотрите эту скрипту http://jsfiddle.net/MFKBj/10/

PD: я добавляю только !important в скрипт, чтобы убедиться, что это над загрузочным CSS, вам это не нужно.

Ответ 2

Вот пример использования системы Bootstrap Grid. Вы можете применить кучу классов для обработки различных видовых экранов.

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

Ответ 3

У меня был тот же вопрос, что и у OP - он спрашивает о том, как расстояние между объектами происходит горизонтально - BS сильно разбивает вещи как показано здесь. Здесь мое решение:

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

Ответ 4

Вот как я это сделал; добавьте минимальное расстояние ко всем меткам и элементам управления и используйте отрицательный запас на контейнере, чтобы все было правильно выровнено.

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

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

Ответ 5

В Bootstrap 4 у вас есть Утилиты Spacing.

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