bootstrap 4切换的水平对齐失败答案

【问题标题】：bootstrap 4 horizontal alignment of toggle failsbootstrap 4切换的水平对齐失败
【发布时间】：2018-02-22 18:32:51
【问题描述】：

我在我的 Bootstrap 4 框架中使用 Material Design Lite 的切换元素，并且无法将元素与列的右侧对齐。

注意“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>

如何将元素与列的右侧对齐？对于上下文，我试图获得类似于 chrome 中设置的布局（文本左对齐，切换右对齐）：

【问题讨论】：

MD 使用 pull-right NOT float rosskevin.github.io/bootstrap-material-design/components/…
如前所述，pull-right 也不起作用。

标签： css twitter-bootstrap material-design material-design-lite

【解决方案1】：

使用 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>

【讨论】：

谢谢！但我不太明白为什么“宽度：自动”突然把它拉到右边？为什么按钮与'float-right'右对齐而切换左对齐？
生成的元素没有继承您设置的float:right 规则，而是指定了width: 100%，因此它是左对齐的并占据了div.col-4 的整个宽度。按钮只是一个<button>，但切换是由 JavaScript 创建的，并且更复杂。