ブートストラップ4トグルの水平アライメントが失敗します

ブートストラップ4フレームワークでMaterial Design Liteのトグル要素を使用しており、要素を列の右側に揃えることができません。ブートストラップ4トグルの水平アライメントが失敗します

"float-right"クラスは、Bootstrap要素（ボタン）でうまく動作することに注意してください。私はまた、コンテナに "text-right"クラスを適用しようとしましたが、justify-content-end、justify-content：flex-end、pull-rightなど...何も動作しません。私は、列の右側に要素を揃えることができますどのように

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 1</div> 
 
     <div class="col-4 float-right"> 
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1"> 
 
      <input type="checkbox" id="switch-1" class="mdl-switch__input float-right" checked> 
 
      </label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 2</div> 
 
     <div class="col-4 float-right"> 
 
     <button type="button" class="btn btn-primary float-right">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body>

？（右揃えトグル、テキストは左揃え）コンテキストのために私はクロームの設定と同様のレイアウトを取得しようとしています：

出典

2017-09-13 tealowpillow

MDは、書かれたようhttp://rosskevin.github.io/bootstrap-material-design/components/utilities/ – mlegg

浮きませ右プルプル右も動作しません使用しています。 – tealowpillow

をあなたはそれを右にオーバーシフト得ることができCSSルールで。浮いているので、ちょうど一列になるようにパディングをする必要があります。もう1つの選択肢は、コントロールをdiv.col-1に入れ、移動するスペースを少なくすることです。

label.mdl-switch { width: auto !important; }

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 1</div> 
 
     <div class="col-4 float-right"> 
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1"> 
 
      <input type="checkbox" id="switch-1" class="mdl-switch__input" checked> 
 
      </label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 2</div> 
 
     <div class="col-4 float-right"> 
 
     <button type="button" class="btn btn-primary float-right">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-09-13 23:26:04 miken32

ありがとう！私はなぜ「幅：自動」が突然それを右に引っ張ったのかはっきりしていませんか？なぜボタンが 'float-right'で右に揃えられ、トグルが左揃えになったのですか？ – tealowpillow

生成された要素は設定した 'float：right'ルールを継承しません。' width：100％ 'を指定していますので、左揃えになり、' div.col-4'の幅全体を占めます。ボタンは '

ブートストラップ4トグルの水平アライメントが失敗します

答えて

関連する問題