ラベルの付いた縦方向のチェックボックス/ラジオ入力

チェックボックスをブートストラップv4のラベルに垂直に配置するにはどうすればよいですか？一部が重複する可能性を言及したが、している：私はチェックボックスが欲しいラベルの付いた縦方向のチェックボックス/ラジオ入力

https://plnkr.co/edit/TmD0ffKrk32oy7etD8g0?p=preview

または

<body style='font-size:200%'> 
    <div class="form-group has-success"'> 
    <label class="custom-control custom-checkbox"> 
    <input type="checkbox" class="custom-control-input"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description">Check this</span> 
    </label> 
</div> 
<div class="form-group has-warning"> 
    <label class="custom-control custom-checkbox"> 
    <input type="checkbox" class="custom-control-input"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description">Check this</span> 
    </label> 
</div> 
<div class="form-group has-danger"> 
    <label class="custom-control custom-checkbox"> 
    <input type="checkbox" class="custom-control-input"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description">Check this</span> 
    </label> 
</div> 
    </body>

が垂直方向にラベル

編集してセンタリングする：私は、次の例を持っています私はブートストラップのV4ソリューションを探しています。ブートストラップは、フレックスレイアウトなどのCSSをたくさん追加します。これは、私がこれまで読んだことのあるすべての解決策を時代遅れにしています。

出典

2017-04-09 ncohen

可能な重複下記

.container { display: table; vertical-align: middle; } .custom-control-indicator { display: inline-block; vertical-align: middle; position: relative; top:0; }

参照スニペットをラベルは一貫してクロスブラウザである]（http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers）と[ホスト他にもSOの検索で見つけたもの]（http://stackoverflow.com/search?q=align+checkbox+with+label） – Rob

@Rob既存の質問をお伝えいただきありがとうございますが、私は特定のブートストラップv4ソリューションを探しています。そして見つけられなかった – ncohen

次のようにラベルやスタイルにクラス名.containerを追加：[どのようにチェックボックスを整列させるとそれらの

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="4.0.0-alpha.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="form-group has-success"> 
 
    <label class="custom-control custom-checkbox container"> 
 
    <input type="checkbox" class="custom-control-input"> 
 
    <span class="custom-control-indicator"></span> 
 
    <span class="custom-control-description">Check this</span> 
 
    </label> 
 
    </div> 
 
    <div class="form-group has-warning"> 
 
    <label class="custom-control custom-checkbox container"> 
 
    <input type="checkbox" class="custom-control-input"> 
 
    <span class="custom-control-indicator"></span> 
 
    <span class="custom-control-description">Check this</span> 
 
    </label> 
 
    </div> 
 
    <div class="form-group has-danger"> 
 
    <label class="custom-control custom-checkbox container"> 
 
    <input type="checkbox" class="custom-control-input"> 
 
    <span class="custom-control-indicator"></span> 
 
    <span class="custom-control-description">Check this</span> 
 
    </label> 
 
    </div> 
 
    <style> 
 
    .container { 
 
     display: table; 
 
     vertical-align: middle; 
 
    } 
 
    
 
    .container .custom-control-indicator { 
 
     display: inline-block; 
 
     vertical-align: middle; 
 
     position: relative; 
 
     top:0; 
 
    } 
 
    </style> 
 
</body> 
 

 
</html>

出典

2017-04-09 20:20:19 repzero

ラベルの付いた縦方向のチェックボックス/ラジオ入力

答えて

関連する問題