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>

我该如何调整的元素列的右侧？对于上下文我试图得到类似镀铬的设置布局（文本左对齐，拨动右对齐）：

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>

谢谢！但我不太了解为什么“width：auto”突然将它拉向右边？为什么按钮右对齐，右对齐，左对齐？ – tealowpillow

生成的元素不是继承你设置的'float：right'规则，而是指定'width：100％'，因此它是左对齐的并且占据'div.col-4'的整个宽度。该按钮只是一个'

bootstrap 4水平对齐切换失败

相关推荐