ブートストラップ4のラジオボタン付きライニングラベル

Question

ラベル付きのラジオボタンをインライン化したい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/

Answer 1

まずあなたがdivが正しく閉じられていなかったと第二私はちょうど今、それが働いているようだform-groupでform-checkクラスを置き換えます。

<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>

Answer 2

私はこのようにそれを行うだろう：

<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>