我是Bootstrap初学者,请教以下代码:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row border">
<div class="col-lg-4 border">One</div>
<div class="col-lg-4 border">Two</div>
<div class="col-lg-4 border">Three</div>
</div>
</div>
如果我将浏览器窗口调整为不符合 lg 断点条件的小尺寸,您会看到这三个元素相互堆叠。 但是如果我删除断点,就像:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row border">
<div class="border">One</div>
<div class="border">Two</div>
<div class="border">Three</div>
</div>
</div>
这三个元素就像内联元素而不是相互堆叠,为什么呢?因为它实际上与 col-lg-4 相同的代码,只要我停留在小窗口中,所以 lg 断点没有被触发。
最佳答案
因为Bootstrap的行是display:flex
,默认的flexbox方向是flex-direction:row
。如果您删除 .row
,您将按预期看到内部 div 堆栈。
<div class="container">
<div class="border">
<div class="border">One</div>
<div class="border">Two</div>
<div class="border">Three</div>
</div>
</div>
演示:https://www.codeply.com/go/H2y9xDXLv8
另请注意,the .row
should only be used to contain grid columns (.col*
) .
关于html - Bootstrap中的断点效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54885715/