it-swarm.com.ru

Начальная загрузка формы горизонтального вертикального выравнивания флажков без текста метки

Сегодня утром я перешел с 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">, и использовать цвет фона в качестве цвета шрифта, чтобы скрыть текст.

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

8
Thylossus

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

label{
    display:inline;
}

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

7
Serlite

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

<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. Remove class = "control-label"
  3. Добавить класс = "тянуть-вправо".

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

2
Nathan Agersea

Если вам не нужен следующий текст для флажков, почему бы просто не удалить <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
Rob Quincey