本文介绍了如何在使用 Bootstrap 4 构建响应式布局时，使两列在移动设备上折叠成一列后，其高度能够根据内容自适应。核心在于利用 `@media` 查询，在特定屏幕尺寸下，强制将 `row` 元素的 `display` 属性设置为 `block!important`，从而解决列高度平均分配的问题，确保内容较少的列也能正确显示。
在使用 Bootstrap 4 创建响应式布局时，经常会遇到需要在不同屏幕尺寸下调整列的排列方式。一种常见的需求是在桌面端并排显示两列，而在移动端将它们折叠成一列。然而，当内容较少时，折叠后的列可能会出现高度不正确的问题，导致视觉效果不佳。本文将详细介绍如何解决这个问题，确保列的高度始终根据内容自适应。
问题描述
假设我们有一个包含头部、内容区域和底部的布局，内容区域包含两列，并且这两列需要支持滚动。在桌面端，我们希望这两列并排显示，并且可以独立滚动。在移动端，我们希望这两列折叠成一列，垂直排列。
以下是一个基本的 HTML 结构：
Bootstrap 4 Responsive Columns html, body { height: 100%; }HeaderHello
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 布局，使列的高度根据内容自适应。
以下是修改后的 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 代码：
Bootstrap 4 Responsive Columns html, body { height: 100%; } @media (max-width: 768px) { .row.flex-grow-1 { display: block !important; } }HeaderHelloWorldFooter
在这个 HTML 代码中，我们将 col-6 类修改为 col-12 类，使列在移动端占据全部宽度。同时，我们将 overflow-auto 类修改为 overflow-visible 类，允许内容超出列的高度。
总结
通过使用 @media 查询，我们可以轻松地解决 Bootstrap 4 响应式布局中列高度自适应的问题。这种方法简单有效，可以确保列的高度始终根据内容自适应，从而提高用户体验。
注意事项：
使用 !important 可能会影响 CSS 的优先级，因此应该谨慎使用。根据实际需求调整 @media 查询的屏幕宽度。确保 CSS 代码的优先级高于 Bootstrap 默认的样式。
以上就是Bootstrap 4：响应式列高度自适应内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586148.html
微信扫一扫 
支付宝扫一扫 
