Bootstrap form-горизонтальное вертикальное выравнивание флажков без текста метки

сегодня утром я перешел с Bootstrap 3.0.0 на 3.2.0, потому что мне нужны были некоторые новые функции для моего веб-приложения. Казалось, все работает так, как ожидалось, пока я не заметил проблему с вертикальным выравниванием флажков в .form-horizontal форма.

пример доступна на http://www.bootply.com/AYN64feYze. Разметка для этого минимальный пример:

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

если флажок имеет следующий текст сдвинут ниже строки следует появиться.

есть ли решение этой проблемы? Поскольку у меня уже есть ведущая метка, мне не нужен следующий текст для моих флажков. Мой текущий обходной путь-добавление текста в <label> С <input type="checkbox"> и используйте цвет фона в качестве цвета шрифта, чтобы скрыть текст.

Спасибо за помощь.

7
checkbox css html twitter-bootstrap vertical-alignment

3 ответов

Я не уверен, что это повлияет на остальную часть вашего макета формы, но проблема, похоже, будет решена, если вы измените атрибут отображения <label> (в настоящее время inline-block) to:

label{
    display:inline;
}

здесь обновление Bootply. Надеюсь, это поможет! Дайте мне знать, если у вас возникнут вопросы.

7

Это сработало для меня:

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>

во-первых, я должен был удалить <div class='checkbox'> элемент. Затем я внес следующие изменения в элемент метки флажка:

  1. поместите метку в собственный столбец div <div class="col-lg-3"></div>
  2. удалить класс= "control-label"
  3. добавить класс= "pull-right".

Я закончил с флажком, который согласован с другими входами по горизонтали и по вертикали с меткой.

2

Если вам не нужен следующий текст для галочки, почему бы просто не удалить <label> окружающие галочки. Вот так.

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

этот код, казалось, работал в вашем Bootply, когда я попробовал его.

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

0