CSS和/或Bootstrap -如何垂直拆分屏幕

.container {
  display: flex;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.left-panel {
  flex: 1; /* 左侧面板占据剩余空间 */
}

.right-panel {
  flex: 1; /* 右侧面板占据剩余空间 */
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 将容器分为两列 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.left-panel {
  grid-column: 1; /* 左侧面板位于第一列 */
}

.right-panel {
  grid-column: 2; /* 右侧面板位于第二列 */
}

<div class="container">
  <div class="row">
    <div class="col-md-6">左侧面板</div>
    <div class="col-md-6">右侧面板</div>
  </div>
</div>