如何解决从 Boostrap 3 迁移的 Bootstrap 4 网格布局问题
使用 bootstrap 3.3.7 我能够为多行“行跨度”一个 div 并用其他 div 填充剩余的列空间,例如使用以下代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Responsive Bootstrap 3.3.7</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:0px">
<div style="background-color:green">level 1 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 2 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 3 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 4 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 5 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
</div>
</div>
我得到: Bootstrap 3.3.7 example layout
但是使用 Bootstrap 4.1.1 我得到了这个:
Bootstrap 4.1.1 example layout
只有前两个 div 填充了剩余的 6 列,其余的在第一个 div 下移动,我试图查看文档,但我无法弄清楚这一点,是否有人能够在 boostrap 上复制第一个行为4?
解决方法
使用 Bootstrap-4,因为它使用 flex,
,您需要提供包含列和行来定义所有内容之间的关系。如果您希望将 10 个 col-3 部分放在一起,则将它们放入自己的 col-6 容器中,然后创建一个新行来保存较小的列(现在是 col-6,因为它们开始了 12 个单元)再来一遍)。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Responsive Bootstrap 4.6.0</h1>
<div class="row">
<div class="col-6" style="padding:0px">
<div style="background-color:green">level 1 - col-6</div>
<div style="background-color:green">level 2 - col-6</div>
<div style="background-color:green">level 3 - col-6</div>
<div style="background-color:green">level 4 - col-6</div>
<div style="background-color:green">level 5 - col-6</div>
</div>
<div class="col-6 p-0">
<div class="row">
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
<div class="col-6" style="background-color:blue">Span 3 - col 3</div>
</div>
</div>
</div>
</div>
此外,您不需要在每个断点处定义列。指定 col-6
将提供从智能手机显示器到宽屏显示器的六列跨度。如果您想为大屏幕设置不同的列(从小屏幕开始,然后逐步完善),只需添加 col-lg-3
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。