我有两行,每行包含 3 列,我想在某个断点处从 3 列切换到 2 列,从 2 列切换到 1 列(移动断点)。到目前为止,这就是我所拥有的。
@media (min-width:768px) {
.col-md-4{
min-width: 50%;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row" >
<div class="col-md-4">4</div>
<div class="col-md-4">5</div>
<div class="col-md-4">6</div>
</div>
Question
这不起作用,我的代码中缺少什么?帮助我是新手
最佳答案
我会将它们全部放在同一个 .row
中并使用适当的网格类。这应该让你得到你想要的:
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
注意:我不会重新定义 .col-md-4
或任何 Bootstrap 内置网格眼镜。
有关更多详细信息,请阅读有关使用网格眼镜的 Bootstrap 文档:https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
关于html - Bootstrap 3 : Responsive breakpoint from rows of 3 columns,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51152893/