Twitter Bootstrap рядной форма интервал

Question

Here is a JSFiddle showing my code in action.

Я хочу добавить несколько пикселей расстояния между различными частями формы наиболее правильным способом с использованием 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> 

Answer 1

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

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

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

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

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

Answer 3

У меня был тот же вопрос, что и у ОП - он спрашивает о том, как расстояние между объектами происходит горизонтально - БС хорошо сбивает вещи вместе as seen here. Вот мое решение:

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

Answer 4

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

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

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

Answer 5

В Bootstrap 4 у вас есть Spacing utilities.

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

Answer 6

В 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