html - Bootstrap中的断点效果

Question

我是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 断点没有被触发。

Answer 1

因为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*) .