Question

给出这个布局示例：

https://www.codeply.com/go/Xw4cYl3kwu

“HEADER”列是固定高度的。所有其他列都具有可变内容，可变高度取决于显示的页面。

如何将“MENU”和“CONTENT”列延伸到“FOOTER”？

Answer 1

如果您可以使用flexbox，那么这可能是一个解决方案：

<div class="container-fluid">
  <div class="row" >
    <div class="col-9 bg-danger" style="display:flex;flex-direction: column">
      <div class="row" style="height: 3rem">
        <div class="col-12" >
          <h1 class="text-center">HEADER</h1>
        </div>
      </div>
      <div class="row" style="flex-grow:1">
        <div class="col-3 bg-success">MENU</div>
        <div class="col-9 bg-warning">CONTENT</div>
      </div>
    </div>
    <div class="col-3 bg-info">
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
    </div>
  </div>
  <div class="row bg-primary">
    <div class="col-12">
      <div class="text-center">FOOTER</div>
    </div>
  </div>
</div>

如何使用Bootstrap 4拉伸嵌套列

1 个答案: