在Bootstrap 3中实现列等高布局：Flexbox方案详解-html教程-PHP中文网

在Bootstrap 3中实现列等高布局：Flexbox方案详解

碧海醫心

发布： 2025-12-03 12:02:29

原创

397人浏览过

在Bootstrap 3中实现列等高布局：Flexbox方案详解

本文详细阐述了在bootstrap 3框架中，如何通过引入flexbox布局实现列等高效果。由于bootstrap 3的栅格系统并非原生基于flexbox，因此需要巧妙地应用`display: flex`和`flex: 1 0 auto`等css属性，将`row`和`col`元素及其内部内容转换为flex容器和flex项目，从而确保所有列的高度能够自动拉伸对齐，解决视觉对齐和阴影效果的显示问题。

理解Bootstrap 3列等高挑战

Bootstrap 3的栅格系统基于浮动（float）实现，其列（col-md-X）默认情况下会根据其内部内容的多少来决定自身高度。当同一行（row）中的不同列内容长度不一时，就会出现高度不一致的情况。这对于需要边框、背景或阴影等视觉元素对齐的布局来说，是一个常见的挑战。传统的解决方案（如使用负外边距、JavaScript计算高度等）往往增加复杂性或存在兼容性问题。

Flexbox：解决列等高的现代方法

尽管Bootstrap 3并非原生支持Flexbox，但我们可以通过自定义CSS引入Flexbox特性，以实现列等高。Flexbox（弹性盒子）布局模型的核心优势在于其能够轻松地控制容器内项目的对齐、方向和尺寸，特别是其默认的stretch行为，可以使Flex项目自动拉伸以填充其Flex容器的高度。

核心Flexbox概念回顾

Flex容器（Flex Container）：应用display: flex的元素。它定义了一个Flex布局上下文。
Flex项目（Flex Item）：Flex容器的直接子元素。Flex项目默认会尝试拉伸以匹配Flex容器的高度。
flex: 1 0 auto：这是flex-grow、flex-shrink和flex-basis的简写。
- flex-grow: 1：允许项目在必要时增长，占用可用空间。
- flex-shrink: 0：防止项目收缩，保持其内容尺寸。
- flex-basis: auto：项目的初始大小由其内容决定。当应用于Flex项目时，它通常意味着项目将填充所有可用空间并保持其内容尺寸的灵活性。

在Bootstrap 3中应用Flexbox实现列等高

要使Bootstrap 3的列等高，我们需要将div.row作为Flex容器，并将其直接子元素（即div.col-md-X）作为Flex项目。关键在于，Flexbox的“拉伸”特性只作用于其直接子元素。如果列内部还有嵌套的元素也需要等高，那么该列本身也需要成为一个Flex容器，而其内部的子元素则成为该列的Flex项目。

步骤一：定义自定义Flexbox CSS类

首先，在您的样式表中添加以下CSS规则：

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

.d-flex-item {
  flex: 1 0 auto; /* 允许项目增长，不收缩，并根据内容确定初始大小 */
}

/* 现有样式（保持不变） */
.contact .info {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

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

登录后复制

.d-flex 类将任何元素转换为Flex容器。
.d-flex-item 类应用于Flex容器的直接子元素，使其能够填充可用高度。

步骤二：修改HTML结构以应用Flexbox类

接下来，根据Flexbox的嵌套特性，将这些类应用到您的Bootstrap栅格结构中。

考虑以下原始HTML结构片段：

Fotor AI Face Generator

Fotor 平台的在线 AI 头像生成器

查看详情

<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容器：为其添加 d-flex 类。
div.col-md-5 和 div.col-md-7 变为Flex项目：为其添加 d-flex-item 类。
如果列内部内容需要拉伸：
- div.col-md-5 内部的 div.info 元素需要填充 col-md-5 的高度。因此，div.col-md-5 自身也需要成为一个Flex容器（添加 d-flex），而 div.info 则成为其Flex项目（添加 d-flex-item）。
- div.col-md-7 内部的 form 元素如果需要填充 col-md-7 的高度，也需要类似处理。在示例中，form 元素本身就包含了所有内容，因此 col-md-7 只需要作为Flex项目即可。

修改后的HTML示例：

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

    <!-- row 变为 Flex 容器 -->
    <div class="row d-flex"> 
      <!-- col-md-5 变为 Flex 项目，同时自身也作为 Flex 容器 -->
      <div class="col-md-5 d-flex-item d-flex">
        <!-- info 变为 col-md-5 的 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>

      <!-- col-md-7 变为 Flex 项目 -->
      <div class="col-md-7 d-flex-item">
        <form action="forms/contact.php" method="post" role="form" class="php-email-form">
          <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 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 class="form-group col-md-6">
              <label for="name">T</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <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 class="text-center"><button type="submit">Send</button></div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

登录后复制

关键点解析：

div.row 加上 d-flex，使其成为Flex容器，其直接子元素 div.col-md-5 和 div.col-md-7 就会自动尝试拉伸高度。
div.col-md-5 内部的 div.info 元素需要填充 col-md-5 的高度。因此，div.col-md-5 自身也需要被设置为 d-flex (作为容器)，而 div.info 则设置为 d-flex-item (作为项目)。这样，div.info 才能在其父级 col-md-5 内部拉伸。
div.col-md-7 的 form 元素如果需要填充 col-md-7 的高度，同样需要将 col-md-7 设为 d-flex，将 form 设为 d-flex-item。在示例中，form 元素本身就包含了所有内容，因此 col-md-7 只需要作为Flex项目即可，其内部的 form 元素会自然地占据所需空间。如果 form 需要严格填充 col-md-7 的高度，则需要对其父级 col-md-7 也添加 d-flex，并对 form 添加 d-flex-item。

注意事项

Flexbox的层级性：Flexbox的display: flex只对其直接子元素产生影响。如果需要更深层次的元素拉伸，就需要创建嵌套的Flex容器。
height属性的覆盖：如果Flex项目被明确设置了height属性，它将覆盖Flexbox的默认拉伸行为。
浏览器兼容性：虽然现代浏览器对Flexbox的支持已经非常完善，但在支持Bootstrap 3的早期浏览器中（如IE9及以下），可能需要添加 -webkit- 等厂商前缀，甚至完全不兼容Flexbox。考虑到Bootstrap 3的发布时间，这通常不是问题。
避免过度使用：仅在确实需要等高布局的场景下使用Flexbox，避免不必要的复杂性。

总结

通过巧妙地在Bootstrap 3的栅格系统中引入自定义的Flexbox类，我们可以优雅地解决列等高这一常见布局难题。核心思想是将row作为Flex容器，将col作为Flex项目。对于需要其内部内容也等高拉伸的col，它本身也需要被声明为Flex容器，并将其直接子元素声明为Flex项目。这种方法提供了一种灵活且强大的方式来控制布局，确保视觉上的一致性和专业性。

以上就是在Bootstrap 3中实现列等高布局：Flexbox方案详解的详细内容，更多请关注php中文网其它相关文章！