Twitter bootstrap 4两列全高，不带滚动条

在使用Twitter Bootstrap 4创建两列布局时，确保两列都占据整个视口高度（全高）且不出现滚动条，可以通过以下步骤实现：

基础概念

Bootstrap 4: 是一个流行的前端框架，用于快速开发响应式网页设计。
网格系统: Bootstrap使用12列网格系统来布局页面元素。
Flexbox: Bootstrap 4基于Flexbox布局模型，使得创建复杂的布局变得更加容易。

类型与应用场景

两列布局: 常用于将页面分为主要内容区域和侧边栏。
全高布局: 确保内容占据整个视口高度，适用于需要最大化屏幕空间的应用场景。

实现步骤

以下是一个示例代码，展示如何使用Bootstrap 4创建两列全高布局且不带滚动条：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Columns Full Height</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .full-height {
      height: 100vh;
    }
    .no-scrollbar {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="d-flex flex-column full-height no-scrollbar">
    <header class="bg-primary text-white p-3">
      Header
    </header>
    <div class="flex-grow-1 d-flex no-scrollbar">
      <div class="bg-info text-white col-md-8 p-3">
        Main Content
      </div>
      <div class="bg-warning text-white col-md-4 p-3">
        Sidebar
      </div>
    </div>
    <footer class="bg-secondary text-white p-3">
      Footer
    </footer>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释

HTML结构:
- 使用d-flex和flex-column类将整个页面设置为一个垂直的Flexbox容器。
- full-height类确保整个页面高度为视口高度（100vh）。
- no-scrollbar类通过设置overflow: hidden来隐藏滚动条。

CSS样式:
- html, body设置为100%高度，并移除默认的margin和padding。
- .full-height确保容器占据整个视口高度。
- .no-scrollbar隐藏滚动条。
Bootstrap网格系统:
- 使用col-md-8和col-md-4类将两列分别设置为8和4列宽，适应中等及以上屏幕尺寸。