Bootstrap 4：.row导致水平溢出

Question

我创建了小提琴供参考：https://jsfiddle.net/qjpay7e3/3/

<div class="container">
  <div class="row">
    <label class="col-lg-4" >Gallery Plus</label>
    <div class="col-lg-8">
      <input type="checkbox">
    </div>
  </div>
</div>

在这里，我在div中有两个组件和复选框。我希望这两个元素在同一行上使用 Bootstrap 4 的 row 类。

但是我不知道为什么我没有把那些元素放在同一行。

Answer 1

由于列定义的原因，设置col-lg-4和col-lg-8会自动使用col-12和col-12，这意味着如果您的窗口小于lg的最小定义，他们将放置一行以匹配定义。

但是，如果您使用col-4和col-8，它们将出现在同一行中。使用-lg修饰符时，它们不会出现在同一行上，因为您可能无法使用足够宽的屏幕

Answer 2

您的代码完全正确。就像您使用-lg一样，因此大屏幕的标签和复选框显示在同一行。

为什么它不适用于<大屏幕？

这是因为引导程序中的样式应用于层次结构中的上层，这意味着，如果您应用了-sm（更小）列，则它适用于向上层次结构中的屏幕，即适用于-md和-lg屏幕。

在您的情况下，您已将其应用于-lg屏幕，因此仅适用于尺寸大于等于lg的屏幕。