代码之家 › 专栏 › 技术社区 › Vandan Shah

引导4:。行导致水平溢出

bootstrap-4 html5

-3

Vandan Shah · 技术社区 · 6 年前

我创造了小提琴作为参考: 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中的checkbox,我希望这两个元素位于我使用的同一行行类别 引导4 .

但我不知道为什么我不把这些元素放在同一条线上。

2 回复 | 直到 6 年前

1

-2

Deepak Verma 6 年前

你的代码很好。由于您使用了-lg,因此您的标签和复选框将出现在大屏幕的同一行。

为什么对screen<large不起作用??

这是因为bootstrap中的样式应用于层次结构中的上一级,这意味着如果应用了列sm(更小),那么它将应用于层次结构中的屏幕,即应用于-md和-lg屏幕。

在您的情况下,您已将其应用于-lg屏幕,因此它仅适用于大小为>=lg的屏幕。

2

-2

mast3rd3mon 6 年前

这是因为列定义,设置 col-lg-4 和 col-lg-8 自动使用 col-12 和 第12列 意思是如果你的窗口小于 lg 最小定义,它们将删除一行以匹配定义。

但是,如果您使用 col-4 和 col-8 ,它们出现在同一行。当使用 -lg 修改器,因为您可能没有使用足够宽的屏幕