Флажок Bootstrap input выровнять по вертикали

Question

Флажок Bootstrap input выровнять по вертикали

Используя Bootstrap версии 2.3.2, у меня есть макет формы, подобный изображению ниже, и поскольку флажок имеет встроенную метку, есть проблема выравнивания.

Введите описание изображения здесь

Добавление поля к input[type="checkbox"] дает только поле для флажка, а не встроенную метку. Как сделать так, чтобы флажок и его метка по вертикали совпадали с текстовыми полями рядом с ним?

Вот
JS BIN Если вам интересно.

562 5

html css twitter-bootstrap

5 ответов:

Comments

Ничего не найдено.

Vainglory07 · Accepted Answer · 2015-05-08 10:22:28

В вашем HTML Добавьте класс, который будет обрабатывать поле флажка:
 <div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <label>label 1</label>
      <input type="text" />
    </div>
    <div class="span3">
      <label>label 2</label>
      <input type="text" />
    </div>
    <div class="span3 checkbox">
        <input type="checkbox" />test description
    </div>
  </div>
</div>
И в вашем CSS:
input[type="checkbox"] {
 // i just remove this part..
}
.checkbox {
  margin: 30px 0 0 0;
}
Не ставьте поля на флажок, а на родительский div. Проверьте это jsFiddle .

Надеюсь, это поможет

Giovanni Silveira · Accepted Answer · 2013-10-11 03:53:41

Старайтесь всегда использовать что-то вроде этого:
<div class="span3">
    <label for="checkbox" class="checkbox">
        <input type="checkbox" id="checkbox" class="checkbox">test description
    </label>
</div>
Http://jsbin.com/itAdAWA/1/edit

Zim · Accepted Answer · 2013-10-11 03:33:55

Как насчет того, чтобы поставить <label> перед флажком вот так? ..

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span3">
        <label>label 1</label>
        <input type="text">
      </div>
      <div class="span3">
        <label>label 2</label>
        <input type="text">
      </div>
      <div class="span3">
        <label>test</label>
        <input type="checkbox">
      </div>
    </div>
  </div>

Bootply: http://bootply.com/86998

Zartc · Accepted Answer · 2014-06-12 01:18:03

Я только что решил эту точную проблему в bootstrap 3, просто ограничив высоту встроенных флажков до 12 пикселей. Они по умолчанию 40px, я не знаю, почему !
<div class="checkbox-inline">
    <label>
        <input type="checkbox" checked="checked" />
        <span>My correctly aligned check-box</span>
    </label>
</div>
Добавьте это в свой css-файл (у меня лично есть css-файл с именем bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
    max-height: 12px;
}

Jeff · Accepted Answer · 2013-10-11 03:35:44

Не идеальное решение, но измените свой код на ...
<div class="span5">
    <input type="checkbox">test description</input>
  </div>
И установите верхний край на это. Я буду приводить так, как вы хотите - лучше.