Выравнивание этикеток с переключателями в 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>

Скрипка: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>

но все слилось воедино. Скрипка: http://jsfiddle.net/GaDbZ/3/

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

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

5 59
css twitter-bootstrap

5 ответов:

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

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

или для 'radio inline'

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

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

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

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

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

enter image description here

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

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

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