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

Bootstrap 3 中实现等高列布局的Flexbox方案

碧海醫心

发布： 2025-12-02 11:59:21

原创

995人浏览过

Bootstrap 3 中实现等高列布局的Flexbox方案

本文详细介绍了在bootstrap 3环境中，如何利用css flexbox技术解决列不等高的问题。通过创建自定义的flexbox辅助类并将其策略性地应用于row容器及其嵌套的col和内容元素，可以确保各列及其内部组件在视觉上实现高度对齐，从而优化布局的统一性和美观性，避免了传统bootstrap 3布局中常见的边框和阴影错位问题。

理解Bootstrap 3的布局限制

Bootstrap 3的网格系统基于浮动（float）布局，其设计初衷并未原生支持等高列。这意味着当同一行中的不同列包含不同数量的内容时，它们的高度会根据其内容自动调整，导致视觉上出现错位，尤其是在列设置了边框、背景或阴影时，这种不对齐会更加明显。虽然有多种非JavaScript的解决方案被尝试，例如直接在row类上应用display: flex，但由于Flexbox的作用机制和Bootstrap 3的DOM结构，简单的应用往往无法达到预期效果。

Flexbox实现等高列的核心原理

CSS Flexbox（弹性盒子）模型提供了一种更高效的方式来布局、对齐和分配容器中项目空间。实现等高列的关键在于理解Flexbox的以下特性：

弹性容器（Flex Container）: 当一个元素的display属性设置为flex或inline-flex时，它就成为了弹性容器。
弹性项目（Flex Item）: 弹性容器的直接子元素会自动成为弹性项目。
默认拉伸行为: 弹性容器默认的align-items属性值为stretch，这意味着弹性项目会拉伸以填充其弹性容器的交叉轴（默认为高度）。
层级限制: Flexbox的拉伸行为只作用于直接子元素。如果一个弹性项目内部还有子元素需要拉伸以匹配其父弹性项目的高度，那么这个弹性项目自身也需要被设置为弹性容器，并将其内部的子元素设置为弹性项目。

自定义Flexbox辅助类

为了在Bootstrap 3中有效利用Flexbox实现等高列，我们可以定义两个简单的CSS辅助类：

.d-flex: 将元素设置为弹性容器。
.d-flex-item: 将元素设置为弹性项目，并使其能够灵活地增长以填充可用空间。

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

.d-flex-item {
  /* flex-grow: 1; 允许项目增长 */
  /* flex-shrink: 0; 防止项目收缩 */
  /* flex-basis: auto; 基于内容或宽度确定初始大小 */
  flex: 1 0 auto;
}

/* 保持原有样式，与Flexbox无关 */
.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;
}

登录后复制

实现步骤与代码示例

要实现等高列，需要对HTML结构进行策略性地修改，以应用上述Flexbox辅助类。

原始HTML结构（简化）:

<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>

登录后复制

修改后的HTML结构:

科威旅游管理系统源码

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

根据Flexbox的层级作用原理，我们需要进行以下调整：

div.row: 必须是弹性容器，以使其直接子元素（即col-md-5和col-md-7）能够拉伸。
- 添加类：d-flex
div.col-md-5 和 div.col-md-7: 它们是row的直接子元素，需要成为弹性项目并拉伸。
- 添加类：d-flex-item
div.col-md-5 内部的 div.info: 如果div.info需要填充col-md-5的整个高度，那么div.col-md-5自身也必须成为一个弹性容器，而div.info则成为其弹性项目。
- div.col-md-5 额外添加类：d-flex
- div.info 添加类：d-flex-item
div.col-md-7 内部的 form.php-email-form: 同样地，如果表单需要填充col-md-7的整个高度，div.col-md-7也需成为弹性容器，表单成为其弹性项目。在原问题中，表单本身就是主要内容，因此如果col-md-7拉伸，表单通常也会随之。这里示例中未对表单直接应用d-flex-item，但若需要内部元素也拉伸，则需类似处理。

完整HTML示例:

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

    <!-- row 成为弹性容器 -->
    <div class="row d-flex">
      <!-- col-md-5 成为弹性项目，并且自身也是弹性容器 -->
      <div class="col-md-5 d-flex-item d-flex">
        <!-- info 成为 col-md-5 的弹性项目 -->
        <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 成为弹性项目 -->
      <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>

登录后复制

注意事项：

Flexbox的层级作用: 务必记住display: flex只影响其直接子元素。如果需要更深层次的元素拉伸，则需要逐层将父元素设置为弹性容器，子元素设置为弹性项目。
避免固定高度: 如果对弹性项目设置了固定的height值，它将覆盖Flexbox的默认拉伸行为。如果需要控制高度，应考虑使用min-height或调整Flexbox的flex-basis等属性。
浏览器兼容性: 尽管Bootstrap 3本身不原生支持Flexbox，但现代浏览器对Flexbox的支持已非常完善。在旧版浏览器（如IE 9及以下）中可能存在兼容性问题，但在大多数现代应用中这不是问题。
Bootstrap 4及更高版本: 从Bootstrap 4开始，其网格系统已完全基于Flexbox构建，因此实现等高列变得非常简单，通常只需在row上添加d-flex类即可，无需额外的自定义CSS。本文提供的方案主要针对Bootstrap 3项目。