Интервал встроенной формы в Twitter Bootstrap

Вот 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>

html css responsive-design twitter-bootstrap
person Peter Sampras    schedule 13.11.2013    source источник
comment
горизонтальное или вертикальное расстояние? Какие элементы должны быть дальше друг от друга?   -  person Recursor    schedule 13.11.2013
comment
Горизонтальный интервал! Я хочу добавить около 10 пикселей пространства между раскрывающимся списком и группой переключателей, а также некоторое пространство между группой переключателей и кнопкой сохранения. Мне не нужно больше места между переключателями.   -  person Peter Sampras    schedule 13.11.2013
comment
Попробуйте использовать сетку Bootstrap (getbootstrap.com/css/#grid).   -  person meavo    schedule 13.11.2013
comment
@meavo: Причина, по которой я не решаюсь использовать сетку, заключается в том, что я не хочу обязательно изменять ширину элементов (или групп) как таковых, я просто хочу, чтобы пространство между ними было немного шире.   -  person Peter Sampras    schedule 13.11.2013
comment
Вы не найдете переменную интервала ввода Bootstrap. Применяйте CSS по своему усмотрению. Существуют переменные LESS для размера ввода, но не для интервала.   -  person isherwood    schedule 13.11.2013
comment
@isherwood: Хорошо, спасибо, попробую! Причина, по которой я спросил, заключалась просто в том, что я новичок в адаптивной части CSS-дизайна и хочу убедиться, что поступаю правильно для этого конкретного сценария, поскольку форма будет играть центральную роль в функциональности веб-сайта.   -  person Peter Sampras    schedule 13.11.2013
comment
Когда вы принимаете во внимание отзывчивость, вы не должны сомневаться в изменении ширины/высоты элементов. Все должно быть гибким и зависеть от доступного пространства внутри его контейнера.   -  person meavo    schedule 13.11.2013

Ответы (6)


arrow_upward
38
arrow_downward

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

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

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

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

person DaniP    schedule 13.11.2013
comment
В Bootstrap 3 в этом нет необходимости. Вы можете просто обернуть элементы в div.form-group. Смотрите мой ответ для примера. - person Richard Jones; 08.02.2018

arrow_upward
6
arrow_downward

Вот пример использования системы 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>
person meavo    schedule 13.11.2013

arrow_upward
3
arrow_downward

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

.form-inline label {
    margin-left: 5px;
}
person Scott    schedule 21.06.2016

arrow_upward
1
arrow_downward

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

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

.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select {
    margin: 0 3px;
}
person Matthew Hudson    schedule 09.01.2017
comment
Мне больше нравится ваш ответ, так как он обеспечивает лучший общий интервал - person KeyOfJ; 04.05.2020

arrow_upward
1
arrow_downward

В Bootstrap 4 есть утилиты интервалов.

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

arrow_upward
0
arrow_downward

В Bootstrap 3 вы можете обернуть элементы в div.form-group, например так:

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

Вы можете увидеть это в этом разделе документов Bootstrap 3:

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

person Richard Jones    schedule 05.02.2018
comment
Это не обеспечивает интервал, который ищет вопрос. - person KeyOfJ; 04.05.2020
comment
Не предоставляет место и уже используется в исходном вопросе - person romerotg; 21.04.2021