Bootstrap 4：响应式列高度自适应内容

本文介绍了如何在使用 Bootstrap 4 构建响应式布局时，使两列在移动设备上折叠成一列后，其高度能够根据内容自适应。核心在于利用 `@media` 查询，在特定屏幕尺寸下，强制将 `row` 元素的 `display` 属性设置为 `block!important`，从而解决列高度平均分配的问题，确保内容较少的列也能正确显示。

在使用 Bootstrap 4 创建响应式布局时，经常会遇到需要在不同屏幕尺寸下调整列的排列方式。一种常见的需求是在桌面端并排显示两列，而在移动端将它们折叠成一列。然而，当内容较少时，折叠后的列可能会出现高度不正确的问题，导致视觉效果不佳。本文将详细介绍如何解决这个问题，确保列的高度始终根据内容自适应。

问题描述

假设我们有一个包含头部、内容区域和底部的布局，内容区域包含两列，并且这两列需要支持滚动。在桌面端，我们希望这两列并排显示，并且可以独立滚动。在移动端，我们希望这两列折叠成一列，垂直排列。

以下是一个基本的 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
        
    

在上述代码中，我们使用了 Bootstrap 4 的类来创建布局。container-fluid 类用于创建一个全宽的容器，d-flex 和 flex-column 类用于创建一个垂直的 flex 容器，vh-100 类用于设置容器的高度为视口高度。row 类用于创建行，col-6 类用于创建占据一半宽度的列，mh-100 类用于设置列的最小高度为 100%，overflow-auto 类用于在内容超出列的高度时显示滚动条。flex-grow-1 使内容区域可以占据剩余的空间。

当内容较少，没有滚动条时，这两列可能会平均分配高度，导致显示不正确。

解决方案

为了解决这个问题，我们可以使用 @media 查询，在移动端强制将 row 元素的 display 属性设置为 block!important。这样可以覆盖 Bootstrap 默认的 flex 布局，使列的高度根据内容自适应。

ISite企业建站系统1.2.3

ISite企业建站系统是为懂点网站建设和HTML技术的人员（例如企业建站人员）而开发的一套专门用于企业建站的开源免费程序。本系统采用了全新的栏目维护模式，内容添加过程中，前后台菜单是一样的，需要维护前台某个栏目的内容，只需要进后台相应栏目即可，一般的企业人员只需要查看简易的说明就可以上手维护网站内容。通过自由度极高的模板系统，可以适应大多数情况的界面需求，后台带有标签生成器，建站只需要构架好HTM

下载

以下是修改后的 CSS 代码：

html,
body {
  height: 100%;
}

@media (max-width: 768px) {
  .row.flex-grow-1 {
    display: block !important;
  }
}

在这个 CSS 代码中，我们使用了 @media (max-width: 768px) 查询，表示当屏幕宽度小于等于 768 像素时，应用以下样式。我们将 row 元素的 display 属性设置为 block !important，强制覆盖 Bootstrap 默认的 flex 布局。

以下是修改后的 HTML 代码：

    
    
    
    
    


    

        

            Header
        
        

            

                Hello
            
            

                World
            
        
        

            Footer
        
    

在这个 HTML 代码中，我们将 col-6 类修改为 col-12 类，使列在移动端占据全部宽度。同时，我们将 overflow-auto 类修改为 overflow-visible 类，允许内容超出列的高度。

总结

通过使用 @media 查询，我们可以轻松地解决 Bootstrap 4 响应式布局中列高度自适应的问题。这种方法简单有效，可以确保列的高度始终根据内容自适应，从而提高用户体验。

注意事项：

• 使用 !important 可能会影响 CSS 的优先级，因此应该谨慎使用。
• 根据实际需求调整 @media 查询的屏幕宽度。
• 确保 CSS 代码的优先级高于 Bootstrap 默认的样式。