Bootstrap 4：响应式布局中使列高度自适应内容

DDD

发布时间：2025-10-19 10:51:28

334人浏览过

来源于php中文网

原创

bootstrap 4：响应式布局中使列高度自适应内容

本文介绍了如何在使用 Bootstrap 4 构建响应式布局时，使两列在移动设备上折叠成一列后，其高度能够根据内容自适应。通过使用 `@media` 查询和 `display: block!important` 样式，可以有效地解决在没有滚动条时，列高度平均分配的问题，同时保留原有的滚动条功能。

在使用 Bootstrap 4 构建响应式布局时，经常会遇到需要在不同屏幕尺寸下调整列的排列方式和高度的问题。一个常见的场景是，在桌面端，两列并排显示，各自具有滚动条；而在移动端，这两列折叠成一列，垂直排列。在某些情况下，当内容较少，没有滚动条时，这些列可能会平均分配剩余的高度，而不是根据内容自适应。本文将介绍如何解决这个问题，确保在各种情况下列的高度都能正确显示。

问题描述

假设我们有一个包含 Header、两列内容区域和 Footer 的布局。在桌面端，两列内容区域并排显示，并且可以独立滚动。在移动端，我们希望这两列内容区域折叠成一列，垂直排列，并且高度能够自适应内容。

以下是一个基本的 HTML 结构示例：




  
  
  Bootstrap 4 Responsive Columns
  
  


  
    
      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

在移动端，我们通常会使用 @media 查询来改变列的宽度和溢出属性，使其折叠成一列：




  
  
  Bootstrap 4 Responsive Columns
  
  


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


  
    
      Header
    
    
      
        Hello
      
      
        World
      
    
    
      Footer

解决方案

为了解决这个问题，我们可以使用 @media 查询在移动端为包含列的 row 元素添加 display: block!important 样式。这将覆盖 Bootstrap 默认的 flexbox 行为，使得列的高度能够根据内容自适应。

以下是修改后的代码：

科威旅游管理系统

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

下载




  
  
  Bootstrap 4 Responsive Columns
  
  


  
    
      Header
    
    
      
        Hello
      
      
        World
      
    
    
      Footer

通过添加以下 CSS 规则，我们可以在屏幕宽度小于或等于 768px 时，将 row 元素的 display 属性设置为 block：

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

!important 确保这个样式能够覆盖 Bootstrap 默认的样式。

完整示例

以下是包含滚动条和没有滚动条的完整示例代码，展示了如何使用上述方法来解决问题：

包含滚动条的示例：




  
  
  Bootstrap 4 Responsive Columns
  
  


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


  
    
      Header
    
    
      
        Hello
      
      
        World
      
    
    
      Footer

总结

通过使用 @media 查询和 display: block!important 样式，我们可以有效地解决在使用 Bootstrap 4 构建响应式布局时，列高度自适应内容的问题。这种方法既能保证在移动端列的高度根据内容自适应，又能保留原有的滚动条功能。在实际开发中，可以根据具体需求调整 @media 查询的断点值，以适应不同的屏幕尺寸。

CSS 高度与显示属性过渡失效的解决方案：正确实现平滑动画

如何将 HTML 输入字段替换为可交互的段落元素并实现焦点切换

CSS 高度与显示属性过渡失效的解决方案

如何将 HTML 输入段落化并实现点击激活交互

HTML5如何给图片加边框_HTML5给图片加边框做法【样式】

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

521

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

262

2023.07.27