Выравнивание ярлыков с помощью переключателей в бутстрапе

У меня есть форма Bootstrap с некоторыми встроенными переключателями и ярлыком. Я хотел бы держать ярлык в той же строке, что и кнопки, но я не могу заставить этого сделать. Здесь мой подход:

<form>
    <div class="control-group">
        <label class="control-label">Some label</label>
        <div class="controls">
            <label class="radio inline">
                <input type="radio" value="1"/>
                First
            </label>
            <label class="radio inline">
                <input type="radio" value="2"/>
                Second
            </label>
        </div>
    </div>
</form>

Fiddle: http://jsfiddle.net/GaDbZ/2/

Я также пробовал это:

<form>
    <div class="form-inline">
        <label class="control-label">Some label</label>
        <label class="radio">
            <input type="radio" value="1"/>
            First
        </label>
        <label class="radio">
            <input type="radio" value="2"/>
            Second
         </label>
    </div>
</form>

Но все сливается вместе. Fiddle: http://jsfiddle.net/GaDbZ/3/

Как я могу получить горизонтальное расстояние от первого в сочетании с вертикальным интервалом второго?

Кроме того, я должен отметить, что в реальной жизни у меня есть куча других вещей, происходящих в форме, поэтому я не хочу использовать form-horizontal, потому что он создает фанковые поля, которые не сжимаются с другим вещи, которые у меня есть.

Ответы

Ответ 1

Если вы добавите класс "radio inline" в метку управления в решении, предоставленном user1938475, он должен правильно совпадать с другими метками. Или, если вы используете только "радио", как ваш второй пример, просто включите класс "радио".

<label class="radio control-label">Some label</label>

ИЛИ для "встроенного радио"

<label class="radio-inline control-label">Some label</label>

Ответ 2

Так как Bootstrap 3, вы должны использовать классы checkbox-inline и radio-inline на ярлыке.

Это касается вертикального выравнивания.

<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>

Ответ 3

Это может сработать для вас. Пожалуйста, попробуйте это.

<form>
  <div class="form-inline">
    <div class="controls-row">
      <label class="control-label">Some label</label>
      <label class="radio inline">
        <input type="radio" value="1" />First
      </label>
      <label class="radio inline">
        <input type="radio" value="2" />Second
      </label>
    </div>
  </div>
</form>

Ответ 4

Все это хорошо выстроено, включая метку поля. Подкладка метки поля была сложной.

Код HTML:

<div class="form-group">
    <label class="control-label col-md-5">Create a</label>
    <div class="col-md-7">
        <label class="radio-inline control-label">
            <input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
        </label>
        <label class="radio-inline control-label">
            <input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
        </label>
    </div>
</div>

Код CSHTML/Razor:

<div class="form-group">
    @Html.Label("Create a", htmlAttributes: new { @class = "control-label col-md-5" })
    <div class="col-md-7">
        <label class="radio-inline control-label">
            @Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
        </label>
        <label class="radio-inline control-label">
            @Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
        </label>
    </div>
</div>

Ответ 5

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

.radio-inline+.radio-inline {
    margin-left: 5px;
}