2017-07-13 12 views
0

シンプルなようですが、わかりません。私はテキスト付きのチェックボックスを持っています、そして、私はテキストを左側に、チェックボックスを右側に置く必要があります。これどうやってするの?ブートストラップ4:チェックボックスの左側のテキスト、右側のチェックボックス

ここに私のコードです:

.custom-control-description { 
 
    color: #009fff; 
 
    text-transform: uppercase; 
 
} 
 
.custom-checkbox .custom-control-indicator { 
 
    border-radius: 0; 
 
    border: 2px solid #cdc9ca; 
 
    background: #fff; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<form> 
 
<div class="checkbox-wrap d-flex justify-content-end p-2 mb-2"> 
 
    <label class="custom-control custom-checkbox"> 
 
    <span class="custom-control-description">All Pages</span> 
 
    <input type="checkbox" class="custom-control-input"> 
 
    <span class="custom-control-indicator"></span> 
 
</label> 
 
</div> 
 
</form>

答えて

2

custom-control-indicatorのスタイリングに位置属性を追加します。

.custom-checkbox .custom-control-indicator { 
    position: relative; 
    border-radius: 0; 
    border: 2px solid #cdc9ca; 
    background: #fff; 
} 
+0

、以下のコードを試してみてください!それは有望ですが、どうすればテキストが左端に表示されるようにすることができますか?これは今起こっていることです:http://pokit.org/get/img/8840fe1f0f4612c98ac16e2d9666d9c9.jpgお待ちください、コードを更新してください秒である。 – Retros

+0

コードスニペットを共有します。 –

+0

単純に 'margin left:5px'以上を置くと、どれくらい動かなければならないのか分かりません。 @レトロスそして、それがあなたの望むものなら、答えを受け入れてください。 – hansTheFranz

0

は大丈夫ああ、ちょうどラベル内のテキストを配置

<label > 
    <span>Text goes here....</span> 
</label> 
<input type="checkbox" class="custom-control-input"> 
関連する問題