bootstrap 4水平對齊切換失敗

我在我的Bootstrap 4框架中使用Material Design Lite的切換元素，無法將元素對齊到列的右側。bootstrap 4水平對齊切換失敗

注意「float-right」類適用於Bootstrap元素（按鈕）。我也嘗試將「文本 - 右鍵」類應用於容器，以及證明內容結束，證明內容：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規則。因爲它是浮動的，所以你需要使用填充來讓它排列得恰到好處。另一種選擇是將控件放在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

謝謝！但我不太瞭解爲什麼「width：auto」突然將它拉向右邊？爲什麼按鈕右對齊，右對齊，左對齊？ – tealowpillow

生成的元素不是繼承你設置的'float：right'規則，而是指定'width：100％'，因此它是左對齊的並且佔據'div.col-4'的整個寬度。該按鈕只是一個'

bootstrap 4水平對齊切換失敗

回答

相關問題