ブートストラップ4：チェックボックスの左側のテキスト、右側のチェックボックス

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

出典

2017-07-13 Retros

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

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

出典

2017-07-13 09:46:41

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

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

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

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

<label > 
    <span>Text goes here....</span> 
</label> 
<input type="checkbox" class="custom-control-input">

出典

2017-07-13 09:59:08

ブートストラップ4：チェックボックスの左側のテキスト、右側のチェックボックス

答えて

関連する問題