bootstrap 4 切换水平对齐失败

Question

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

注意 "float-right" class 对 Bootstrap 元素（按钮）工作得很好。我还尝试将 "text-right" class 应用到容器，以及 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 中设置的布局（文本左对齐，切换右对齐）：

Answer 1

使用 CSS 规则，您可以将其移到右侧。因为它是浮动的，所以你需要使用填充来让它排列得恰到好处。另一种选择是将控件放在 div.col-1 中并减少 space 来回移动。

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>

bootstrap 4 切换水平对齐失败

bootstrap 4 horizontal alignment of toggle fails

css

twitter-bootstrap

material-design

material-design-lite