Bootstrap 4 Flexbox 将屏幕分为 4 个部分答案

【问题标题】：Bootstrap 4 Flexbox divide Screen into 4 partsBootstrap 4 Flexbox 将屏幕分为 4 个部分
【发布时间】：2018-10-11 19:38:17
【问题描述】：

如何使用 bootstrap 4 和 flexbox 将屏幕分成宽度和高度完全相同的 4 个部分。

每个都应该有 50% 的宽度和高度。

它们也是响应式的（每个内容）。

到目前为止，我尝试了以下但没有成功：

    <div id="app" class="flex-container">
        <div class="flex-item" style="background-color:red"></div>
        <div class="flex-item" style="background-color:blue"></div>
        <div class="flex-item" style="background-color:yellow"></div>
        <div class="flex-item" style="background-color:grey"></div>
    </div>


.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex-basis: 50%;
    flex-grow: 1;
    flex-shrink: 1;
}

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

您可以使用 50% 的最小宽度和高度，并包裹 flex，还将 flex 容器设置为 100 vh。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.flex-item {
  min-width: 50%;
  min-height: 50%;
}

<div id="app" class="flex-container">
  <div class="flex-item" style="background-color:red"></div>
  <div class="flex-item" style="background-color:blue"></div>
  <div class="flex-item" style="background-color:yellow"></div>
  <div class="flex-item" style="background-color:grey"></div>
</div>

【讨论】：

【解决方案2】：

Bootstrap 4 包含您需要的所有 flexbox 实用程序。只需确保容器是全高的。

<div id="app" class="d-flex mvh-100 flex-wrap">
    <div class="w-50" style="background-color:red"></div>
    <div class="w-50" style="background-color:blue"></div>
    <div class="w-50" style="background-color:yellow"></div>
    <div class="w-50" style="background-color:grey"></div>
</div>

演示：https://www.codeply.com/go/6UXPnSgPCs

【讨论】：