Bootstrap4行列自适应高度技巧

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Bootstrap 4 响应式行列自适应高度方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

本文旨在解决 Bootstrap 4 响应式布局中，当两列在移动端折行（`col-12`）时，由于父容器 `flex-grow-1` 导致列高度无法自适应内容，而是均分可用空间的问题。核心解决方案是在移动端通过 `@media` 查询将包含列的 `row` 元素强制设置为 `display: block!important`，从而使列恢复块级流特性，高度根据自身内容自动调整，同时不影响桌面端布局和滚动功能。

引言：Bootstrap 响应式布局中的列高度挑战

在现代 Web 开发中，响应式设计是不可或缺的一环。Bootstrap 框架以其强大的栅格系统和 Flexbox 实用工具类，极大地简化了响应式布局的实现。然而，在特定场景下，如需要将页面垂直方向撑满，并使内容区域可滚动，同时又要确保在不同屏幕尺寸下（尤其是列折行时）列的高度能自适应其内容，可能会遇到一些挑战。

通常，我们会利用 d-flex、flex-grow-1 和 vh-100 等类来创建一个全高布局，并使某些区域弹性增长。但在移动设备上，当两列从并排布局（如 col-6）折叠成单列布局（col-12）时，如果其父 row 仍然保持 Flexbox 行为并带有 flex-grow-1，则子列可能会均分可用高度，而非根据自身内容调整高度，这通常不是我们期望的行为。

问题剖析：折行列的高度自适应困境

考虑一个典型的 Bootstrap 4 布局：一个全高页面，包含页眉、页脚和一个占据剩余垂直空间的中间内容区域。内容区域内部又分为左右两列，在桌面端并排显示，且各自内容过长时可独立滚动。

以下是桌面端两列并排且可滚动的基本结构：

    
    
    
    
    


    

        

            
Header
        
        

            

                
Hello
Hello
Hello
Hello
Hello
Hello
Hello

                Hello
Hello
Hello
Hello
Hello
Hello
Hello

                Hello
Hello
Hello
Hello
Hello
Hello
Hello

            
            

                
World
World
World
World
World
World
World

                World
World
World
World
World
World
World

                World
World
World
World
World
World
World

            
        
        

            
Footer
        
    

当屏幕尺寸变小，列需要折行时，我们通常会将 col-6 改为 col-12。如果此时包含这些列的 row 元素仍保持 display: flex (因为 row 默认就是 Flex 容器)，并且带有 flex-grow-1，那么即使列的内容很短，它们也会尝试均分父 row 的可用高度。

考虑以下移动端布局的尝试，当内容短时，两列各自占据 50% 的高度，而非自适应内容：

    
    
    
    
    


    

        

            
Header
        
        
        

            

                Hello 
            
            

                World 
            
        
        

            
Footer
        
    

在此示例中，即使 "Hello" 和 "World" 内容很短，它们所在的 col-12 元素仍会各自占据中间 row 区域的 50% 高度，而不是根据内容自适应。这破坏了预期的布局效果。

解决方案：利用 display: block 实现高度自适应

解决此问题的关键在于理解 Flexbox 的工作原理。当父 row 是 display: flex 时，其子元素（col- 类）作为 Flex Item 会受到 Flexbox 布局规则的影响。特别是当 flex-grow-1 应用于父 row 时，子列会尝试在可用空间内伸展或收缩。

我们的目标是：在移动端，当列折行时，让它们恢复标准的块级流行为，即高度由其内容决定。这可以通过在特定断点下，将包含列的 row 元素从 display: flex 切换为 display: block 来实现。display: block 会移除 Flexbox 容器的特性，使 col-12 元素作为普通的块级元素垂直堆叠，并自然地根据其内容撑开高度。

实现方法与代码实践

要实现这一目标，我们需要利用 CSS 的 @media 查询来针对不同的屏幕尺寸应用不同的样式。具体来说，我们可以在小屏幕断点下，为中间内容区域的 row 元素添加一个自定义类，并将其 display 属性设置为 block!important，以覆盖 Bootstrap 默认的 Flexbox 行为。

首先，在您的自定义 CSS 文件中添加以下媒体查询规则：

/* custom.css */
@media (max-width: 767.98px) { /* 针对 Bootstrap 的 'sm' 断点及以下 */
    /* 覆盖 row 的 display: flex 行为，使其在小屏幕下变为 block */
    .row-responsive-block {
        display: block !important;
    }
}

然后，将这个自定义类 row-responsive-block 添加到您的 HTML 结构中，位于 flex-grow-1 mh-100 overflow-auto 所在的 row 元素上。

以下是应用了解决方案后的完整 HTML 结构：

    
    
    
    
    


    

        

            
Header
        
        
        

            

                
                
Hello
Hello
Hello
Hello
Hello
Hello
Hello

                Hello
Hello
Hello
Hello
Hello
Hello
Hello

                Hello
Hello
Hello
Hello
Hello
Hello
Hello

            
            

                
World
World
World
World
World
World
World

                World
World
World
World
World
World
World

                World
World
World
World
World
World
World

            
        
        

            
Footer
        
    

效果验证：

1. 当内容较长时（移动端）： 将浏览器宽度调整到小于 768px。此时，row-responsive-block 类生效，row 变为 display: block。col-12 元素会垂直堆叠。由于 row 本身带有 flex-grow-1 mh-100 overflow-auto，如果所有 col-12 内容的总高度超出了 row 的可用高度，则整个 row 区域将出现滚动条，保持了原有的滚动功能。

2. 当内容较短时（移动端）： 将浏览器宽度调整到小于 768px，并修改内容为短文本。

   
   
       
   
           Hello 
       
       
   
           World 
       
   
   

   在这种情况下，col-12 元素的高度将完全由其内容决定，不再均分可用空间。它们会紧密堆叠，只占据所需的垂直高度。

通过这种方式，我们既解决了移动端列高度自适应的问题，又保留了桌面端 Flexbox 布局的优势以及内容区域的滚动功能。

注意事项

• !important 的使用： !important 关键字在这里是必要的，因为 Bootstrap 的实用工具类（如 d-flex）通常具有较高的优先级。使用 !important 可以确保我们的自定义样式能够成功覆盖它。
• 断点选择： 示例中使用了 max-width: 767.98px，这对应 Bootstrap 的 sm（小屏幕）断点。您可以根据您的具体设计需求，选择更合适的断点，例如 md（中等屏幕）或 lg（大屏幕）等。
• overflow 属性： 确保 col-12 元素本身设置为 overflow-visible，这样它们的内容才能自然撑开高度。而父 row 上的 overflow-auto 和 mh-100 负责在内容过多时，使整个折叠区域可滚动。
• CSS 加载顺序： 确保您的自定义 CSS 文件在 Bootstrap 的 CSS 文件之后加载，这样您的样式才能正确覆盖 Bootstrap 的默认样式。

总结

在 Bootstrap 4 响应式布局中，实现折行列的高度自适应内容是一个常见的需求。通过在移动端断点下，巧妙地将包含列的 row 元素从 display: flex 切换为 display: block!important，我们可以让列恢复标准的块级流行为，从而使其高度根据自身内容自动调整。这种方法既保持

以上就是《Bootstrap4行列自适应高度技巧》的详细内容，更多关于的资料请关注golang学习网公众号！