Подкладка меток с помощью переключателей в Bootstrap 4

Я пробую форму Bootstrap 4, в которой я хотел бы встроить переключатели с метками. У меня он работает с бутстрапом 3, но я не могу разобраться с бутстрапом 4 и его пользовательским стилем радио.

Desired Output:
Gender : ( ) Male ( )Female

Может кто-то указать мне верное направление. Ниже мой подход

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-horizontal" method="post">
    <div class="row">
      <div class="form-group row col-lg-6">
        <label for="firstName" class="col-3 col-form-label">First Name</label>
        <div class="col-9">
          <input type="text" class="form-control" />
        </div>
        <div class="form-check row col-lg-6">
          <label class="col-3 col-form-label">Gender</label>
          <div class="col-9">
            <label class="custom-control custom-radio">
              <input name="cat" type="radio" class="custom-control-input" value="1">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Male</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Female</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Скрипт JS: https://jsfiddle.net/w7odmrtr/2/


html css twitter-bootstrap twitter-bootstrap-4
person Ranjeet    schedule 26.05.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Сначала вы div не закрыли должным образом, а во-вторых, я просто заменил класс form-check на form-group, и теперь он работает.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-horizontal" method="post">
    <div class="row">
      <div class="form-group row col-lg-6">
        <label for="firstName" class="col-3 col-form-label">First Name</label>
        <div class="col-9">
          <input type="text" class="form-control" />
        </div>
      </div>
      <div class="form-group row col-lg-6">
          <label class="col-3 col-form-label">Gender</label>
          <div class="col-9">
            <label class="custom-control custom-radio">
              <input name="cat" type="radio" class="custom-control-input" value="1">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Male</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Female</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

person aavrug    schedule 26.05.2017
comment
Спасибо. Отсутствующий div был ошибкой копирования и вставки. Форма-группа работает. Не знаю, откуда у меня появилась идея стилизации как проверки формы. - person Ranjeet; 26.05.2017
comment
Нет проблем, рад помочь, большую часть времени копипаст делает такие вещи :) - person aavrug; 26.05.2017

arrow_upward
4
arrow_downward

Я бы сделал это так:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container">
  <form class="form-horizontal" method="post">
        <div class="row">
          <div class="form-group col-lg-12">
            <label for="firstName" class="col-lg-3 col-form-label">First Name</label>
            <div class="col-lg-9">
              <input type="text" class="form-control">
            </div>
          </div>  
          <div class="form-group col-lg-12">
            <label class="custom-control custom-radio"><span class="custom-control-description">Some Label</span></label>
            <label class="custom-control custom-radio">
              <input name="cat" type="radio" class="custom-control-input" value="1">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description" th:text="#{bool.true}">Yes</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">No</span>
            </label>
          </div>
        </div>
  </form>
</div>

person tiomno    schedule 26.05.2017