本文介绍了如何在使用 Bootstrap 4 构建响应式布局时，使两列在移动设备上折叠成一列后，其高度能够根据内容自适应。通过使用 `@media` 查询和 `display: block!important` 样式，可以有效地解决在没有滚动条时，列高度平均分配的问题，同时保留原有的滚动条功能。
在使用 Bootstrap 4 构建响应式布局时，经常会遇到需要在不同屏幕尺寸下调整列的排列方式和高度的问题。一个常见的场景是，在桌面端，两列并排显示，各自具有滚动条；而在移动端，这两列折叠成一列，垂直排列。在某些情况下，当内容较少，没有滚动条时，这些列可能会平均分配剩余的高度，而不是根据内容自适应。本文将介绍如何解决这个问题，确保在各种情况下列的高度都能正确显示。
问题描述
假设我们有一个包含 Header、两列内容区域和 Footer 的布局。在桌面端，两列内容区域并排显示，并且可以独立滚动。在移动端，我们希望这两列内容区域折叠成一列，垂直排列，并且高度能够自适应内容。
以下是一个基本的 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
在移动端，我们通常会使用 @media 查询来改变列的宽度和溢出属性，使其折叠成一列：
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 Responsive Columns html, body { height: 100%; }HeaderHelloWorldFooter
解决方案
为了解决这个问题，我们可以使用 @media 查询在移动端为包含列的 row 元素添加 display: block!important 样式。这将覆盖 Bootstrap 默认的 flexbox 行为，使得列的高度能够根据内容自适应。
以下是修改后的代码：
Bootstrap 4 Responsive Columns html, body { height: 100%; } @media (max-width: 768px) { .row.flex-grow-1 { display: block !important; } }HeaderHelloWorldFooter
通过添加以下 CSS 规则，我们可以在屏幕宽度小于或等于 768px 时，将 row 元素的 display 属性设置为 block：
@media (max-width: 768px) { .row.flex-grow-1 { display: block !important; }}
!important 确保这个样式能够覆盖 Bootstrap 默认的样式。
完整示例
以下是包含滚动条和没有滚动条的完整示例代码，展示了如何使用上述方法来解决问题：
包含滚动条的示例：
Bootstrap 4 Responsive Columns html, body { height: 100%; } @media (max-width: 768px) { .row.flex-grow-1 { display: block !important; } }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 Responsive Columns html, body { height: 100%; } @media (max-width: 768px) { .row.flex-grow-1 { display: block !important; } }HeaderHelloWorldFooter
总结
通过使用 @media 查询和 display: block!important 样式，我们可以有效地解决在使用 Bootstrap 4 构建响应式布局时，列高度自适应内容的问题。这种方法既能保证在移动端列的高度根据内容自适应，又能保留原有的滚动条功能。在实际开发中，可以根据具体需求调整 @media 查询的断点值，以适应不同的屏幕尺寸。
以上就是Bootstrap 4：响应式布局中使列高度自适应内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586236.html
微信扫一扫 
支付宝扫一扫 
