在 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 行为。

实现列等高的关键在于：

1. 将 div.row 元素设置为 Flex 容器。
2. 将 div.col-md-X 元素设置为其父容器 div.row 的 Flex 项目。
3. 如果 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:   ; */
  /* 1 0 auto 表示允许项目放大，不允许缩小，初始大小根据内容决定 */
  flex: 1 0 auto;
}

flex: 1 0 auto; 解释:

• 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 结构片段：

开源(网店)电子商务软件iWebShop

iWebShop 软件是一款面向独立卖家而开发的单用户B2C网店系统，服务于有建立电子商务需求的独立商家，它是一款高性能高扩展能力的开源 LAMP 电子商务软件，可作为大中型电子商务平台使用。轻松实现买家注册、产品展示、在线定购、在线支付等电子商务功能；iWebShop 集成了产品发布与查询、买家登录、购物车、在线订单、在线支付、在线交流等完善的网上销售功能，最主要的是 iWebShop 的站点管

下载

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

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

修改后的 HTML 结构如下：

  

    

      
CONTACT
    

    
    

      
      

        
        

          

            
            
Email:
            
email
          
          

            
            
Telephone:
            
95 966 0
          
          

            
            
Messenger:
            
address
          
          

            
            
Whatsapp:
            
745 2720
          
          

            
            
Telegram:
            
745 2720
          
        
      

      
      

        
        

          

            

              N
              
            
            

              Email
              
            
          
          

            

              Mobile
              
            
            

              F
              
            
          
          

            T
            
          

          

            U
            
          
          

            
Loading
            

            
Your message has been sent.!
          
          
Send
        
      
    
  

注意事项与总结

• **引入 Bootstrap