在 Bootstrap 3 中使用 Flexbox 实现列等高布局-html教程-PHP中文网

在 Bootstrap 3 中使用 Flexbox 实现列等高布局

霞舞

发布： 2025-12-02 12:02:33

原创

135人浏览过

在 Bootstrap 3 中使用 Flexbox 实现列等高布局

bootstrap 3 默认的栅格系统不支持列等高，导致内容长度不一致时出现布局错位。本教程将详细介绍如何通过引入自定义 flexbox css 类，巧妙地将 row 和 col 元素转换为 flex 容器和 flex 项目，从而实现列内容的自动拉伸对齐，有效解决边框和阴影的视觉不一致问题，提升页面布局的专业性和美观度。

引言：Bootstrap 3 列等高挑战

在网页设计中，当使用 Bootstrap 3 栅格系统构建多列布局时，如果各列内容的高度不一致，通常会导致列的底部不对齐。这不仅影响视觉美观，还会导致诸如边框、背景或阴影等样式出现断裂，尤其是在需要列之间有明确视觉边界的场景下。虽然 Bootstrap 3 本身并未内置 Flexbox 支持来解决这一问题，但我们可以通过自定义 CSS 引入 Flexbox 属性，巧妙地实现列的等高对齐。

理解 Flexbox 与其在 Bootstrap 3 中的应用

Flexbox (弹性盒子布局) 是一种一维布局模型，它能够让容器中的项目沿着主轴或交叉轴进行对齐、分布空间。其核心特性之一是子元素可以自动拉伸以填充其父容器的高度。在 Bootstrap 3 环境下，尽管其核心 CSS 不依赖 Flexbox，我们依然可以手动为其栅格元素添加 Flexbox 行为。

实现列等高的关键在于：

将 div.row 元素设置为 Flex 容器。
将 div.col-md-X 元素设置为其父容器 div.row 的 Flex 项目。
如果 div.col-md-X 内部还有需要拉伸的子元素（例如包裹内容的 div.info 或 form），那么 div.col-md-X 本身也需要成为一个 Flex 容器，同时其内部子元素成为 Flex 项目。

这种层层嵌套的 Flexbox 应用，确保了从最外层到最内层的内容都能根据需要自动拉伸高度。

定义核心 Flexbox CSS 类

为了方便管理和应用，我们定义两个简单的 CSS 类：

.d-flex: 用于将元素定义为 Flex 容器。
.d-flex-item: 用于将元素定义为 Flex 项目，并使其能够填充可用空间。

/* 现有样式保持不变，例如： */
.contact .info {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px; /* 注意：这个 margin-bottom 会影响父容器的高度，如果需要精确等高，可能需要调整 */
}

.contact .php-email-form {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px; /* 同上 */
}

/* 自定义 Flexbox CSS 类 */
.d-flex {
  display: flex;
}

.d-flex-item {
  /* flex: <flex-grow> <flex-shrink> <flex-basis>; */
  /* 1 0 auto 表示允许项目放大，不允许缩小，初始大小根据内容决定 */
  flex: 1 0 auto;
}

登录后复制

flex: 1 0 auto; 解释:

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

查看详情

flex-grow: 1: 允许 Flex 项目在必要时放大，以占据 Flex 容器中的额外空间。
flex-shrink: 0: 不允许 Flex 项目缩小。
flex-basis: auto: Flex 项目的初始主尺寸，由其内容或宽度/高度属性决定。结合 flex-grow: 1，它能确保项目在不缩小的情况下，尽可能拉伸以填充容器。

在 HTML 结构中应用 Flexbox 类

现在，我们将这些自定义的 Flexbox 类应用到现有的 Bootstrap 栅格结构中。关键在于理解 Flexbox 的作用范围是“一层深”：一个 Flex 容器只影响其直接子元素。因此，我们需要根据布局的深度，在适当的层级应用 d-flex 和 d-flex-item。

考虑以下原始的 Bootstrap 3 结构片段：

<div class="row">   
  <div class="col-md-5">
    <div class="info">
      <!-- ... 内容 ... -->
    </div>
  </div>
  <div class="col-md-7">
    <form class="php-email-form">
      <!-- ... 内容 ... -->
    </form>
  </div> 
</div>

登录后复制

为了实现等高，我们需要进行如下修改：

div.row: 设为 Flex 容器。
div.col-md-5 和 div.col-md-7: 设为 div.row 的 Flex 项目。
div.col-md-5: 自身也需设为 Flex 容器，因为它的子元素 div.info 需要拉伸。
div.info: 设为 div.col-md-5 的 Flex 项目。
form.php-email-form: 设为 div.col-md-7 的 Flex 项目。

修改后的 HTML 结构如下：

<section id="contact" class="contact">
  <div class="container">
    <div class="section-title">
      <h2>CONTACT</h2>
    </div>

    <!-- 1. div.row 设为 Flex 容器 -->
    <div class="row d-flex">
      <!-- 2. div.col-md-5 设为 Flex 项目，并作为 Flex 容器 -->
      <div class="col-md-5 d-flex-item d-flex">
        <!-- 3. div.info 设为 Flex 项目 -->
        <div class="info d-flex-item">
          <div class="email">
            <i class="bi bi-envelope"></i>
            <h4>Email:</h4>
            <p>email</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telephone:</h4>
            <p>95 966 0</p>
          </div>
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Messenger:</h4>
            <p>address</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Whatsapp:</h4>
            <p>745 2720</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telegram:</h4>
            <p>745 2720</p>
          </div>
        </div>
      </div>

      <!-- 4. div.col-md-7 设为 Flex 项目 -->
      <div class="col-md-7 d-flex-item">
        <!-- 5. form.php-email-form 设为 Flex 项目 -->
        <form action="forms/contact.php" method="post" role="form" class="php-email-form d-flex-item">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">N</label>
              <input type="text" name="name" class="form-control" id="name" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Email</label>
              <input type="email" class="form-control" name="email" id="email" required>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">Mobile</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">F</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
          </div>
          <div class="form-group">
            <label for="name">T</label>
            <input type="text" class="form-control" name="subject" id="subject" required>
          </div>

          <div class="form-group">
            <label for="name">U</label>
            <textarea class="form-control" name="message" rows="6" required></textarea>
          </div>
          <div class="err">
            <div class="processing">Loading</div>
            <div class="error-message"></div>
            <div class="sent-message">Your message has been sent.!</div>
          </div>
          <div class="text-center"><button type="submit">Send</button></div>
        </form>
      </div>
    </div>
  </div>
</section>

登录后复制