Question

我在我的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中的设置的布局（文本左对齐，切换右对齐）：

Answer 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>

bootstrap 4水平对齐切换失败

1 个答案: