html - 如何在Bootstrap网格中使用Bootstrap的溢出自动功能？

Question

我想做以下事情：

<div class="container-fluid" style="height: 100vh;">
  <div class="row">
    <div class="col-md-4 overflow-auto" style="border: 1px solid blue; height: 4000px;">

    </div>
    <div class="col-md-4" style="border: 1px solid red; height: 100px;">

    </div>
  </div>
</div>

如果单个 col溢出容器，它们会具有自己的滚动条，因此整个页面都不会滚动（只是单个col的滚动条）

Answer 1

您可以通过在div div内使用内部col-*并将高度设置为该div来实现。另外，为行和列提供h-100类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height: 100vh; border: 1px solid green;">
  <div class="row h-100">
    <div class="col-sm-4 h-100 overflow-auto" style="border: 1px solid blue;">
      <div style="height: 4000px;">Content 1</div>
    </div>
    <div class="col-sm-4" style="border: 1px solid red; height: 100px;">
       Content 2
    </div>
    <div class="col-sm-4 h-100 overflow-auto" style="border: 1px solid orange;">
      <div style="height: 500px;">Content 3</div>
    </div>
  </div>
</div>