Flexbox布局求助：Bootstrap导航栏下方无法实现四列均分

你遇到的核心问题是没有把这4个列元素放到一个统一的Flex容器中，同时当前的CSS设置只给每个列本身加了Flex属性，但它们的父元素还是默认的块级布局，所以每个section会自动独占一行，自然没法均分宽度并排显示。另外Bootstrap的默认基础样式也会有一些影响，但核心矛盾还是Flex容器的缺失。

为什么你的CSS代码失效？ #

• 你给.b、.b2等类设置了display: flex，但这只是让这些section内部的元素（比如h1、p）使用Flex布局，section本身还是普通的块级元素——哪怕你设置了max-width:25%，它们依然会遵循块级元素的默认规则上下堆叠，不会横向排列。
• 没有给这些section的父容器设置display: flex：只有当父容器成为Flex容器后，它的直接子元素（也就是这4个section）才会遵循Flex布局规则进行横向排列。

修复步骤 #

1. 添加统一的Flex容器：把4个section放到一个专门的容器里，比如<div class="columns-container">，给这个容器设置Flex属性来控制子元素排列。
2. 调整列的样式：去掉每个列的max-width:25%，改用Flex布局的flex: 1属性让它们自动均分容器宽度；如果需要固定宽度，也可以用flex: 0 0 25%来精确控制。
3. 适配Bootstrap默认样式：Bootstrap的body有默认margin，可以微调容器避免横向滚动。

修正后的代码示例 #

HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>Hover</title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="hover.css">
</head>
<body>
  <nav class="navbar navbar-light bg-light">
    <span class="brand">YORGOS LAFAZANIDIS</span>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a href="#">Home</a>
      </li>
      <li class="nav-item">
        <a href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a href="#">Bundles</a>
      </li>
      <li class="nav-item">
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
  <!-- 新增统一Flex容器 -->
  <div class="columns-container">
    <section class="b">
      <h1>Hero text</h1>
      <p><h5>Text text text</h5></p>
    </section>
    <section class="b2">
      <h1>Hero text</h1>
      <p><h5>Text text text</h5></p>
    </section>
    <section class="b3">
      <h1>Hero text</h1>
      <p><h5>Text text text</h5></p>
    </section>
    <section class="b4">
      <h1>Hero text</h1>
      <p><h5>Text text text</h5></p>
    </section>
  </div>
</body>
</html>

CSS代码

.brand {
  color: #706965;
  font-weight: bold;
  font-size: 21px;
  letter-spacing: 1px;
}
.nav-item {
  margin: 15px;
  letter-spacing: 1px;
  text-decoration: none;
}
a {
  color: #706965;
}
a:hover {
  text-decoration: none;
}

/* Flex容器核心样式 */
.columns-container {
  display: flex;
  width: calc(100% - 2rem);
  margin: 0 1rem;
}

/* 统一列的基础样式，减少重复代码 */
.b, .b2, .b3, .b4 {
  display: flex;
  flex-direction: column;
  background-color: #ccc1c1;
  min-height: 100vh;
  align-items: center;
  /* 让列自动均分容器宽度 */
  flex: 1;
  /* 如果需要固定25%宽度，可替换为：flex: 0 0 25%; */
}

/* 保留差异化样式 */
.b2 {
  align-items: flex-start;
  padding-left: 1rem;
}

额外小提示 #

其实Bootstrap本身自带Grid系统，如果你不想自己写Flex代码，也可以直接用它的.row和.col类快速实现4列均分：

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

这样更贴合Bootstrap的生态，能减少自定义样式和框架默认样式的冲突。

内容的提问来源于stack exchange，提问作者Giwrgos Laphazanidhs