Twitter Bootstrap - встроенная проверка флажка

Вождение себя сумасшедшим, пытаясь понять это. Кажется, я не могу установить флажки, которые на следующей строке выравниваются слева.

Вот пример кода:

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Bbbbbbb
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Cccccccccccccc
</label>
<label class="checkbox inline">  
    <input type="checkbox" id="inlineCheckbox1" value="option1"> Ddddddddd
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Eeeeeeeee
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Ffffffffffff
</label>

И вот результат:

enter image description here

Любые идеи?

Ответы

Ответ 1

Вы можете переопределить класс Bootstrap 2, добавив класс no_indent (или что-то еще):

<label class="checkbox inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

и добавив это в ваш CSS:

.checkbox.inline.no_indent,
.checkbox.inline.no_indent+.checkbox.inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox.inline.no_indent:last-child {
  margin-right: 0;
}

Bootstrap 3: Классы checkbox inline были сведены к одному классу checkbox-inline. HTML становится:

<label class="checkbox-inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

CSS

.checkbox-inline.no_indent,
.checkbox-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox-inline.no_indent:last-child {
  margin-right: 0;
}

Bootstrap 4: Класс checkbox-inline теперь form-check-inline:

<label class="form-check-inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

CSS

.form-check-inline.no_indent,
.form-check-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.form-check-inline.no_indent:last-child {
  margin-right: 0;
}

Ответ 2

Здесь представлено полное решение Bootstrap 3, которое также устраняет ту же проблему для переключателей, без необходимости использования отдельного класса:

.checkbox-inline,
.checkbox-inline + .checkbox-inline,
.checkbox-inline + .radio-inline,
.radio-inline,
.radio-inline + .radio-inline,
.radio-inline + .checkbox-inline {
    margin-left: 0;
    margin-right: 10px;
}

.checkbox-inline:last-child,
.radio-inline:last-child {
    margin-right: 0;
}

Ответ 3

Обтекание каждой метки + ввод в <li> устраняет проблему выравнивания по краю и левому краю без переопределения/настройки CSS

<ul>
  <li>
    <label class="checkbox-inline">
      <input type="checkbox" value="option1"> Option 1
    </label>
  </li>

  <li>
    <label class="checkbox-inline">
      <input type="checkbox" value="option1"> Option 2
    </label>
  </li>
</ul>

Ответ 4

Удалите inline класс в элементе label.