在 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:   ; */
  /* 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 结构片段：

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

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 结构如下：


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