引导 3:来自 3 列行的响应断点

Question

我有两行，每行包含 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>

问题

这不起作用，我的代码中缺少什么？ 虽然帮助新手

Answer 1

我会将它们全部放在同一个.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 内置网格眼镜。

有关更多详细信息，请阅读有关使用网格眼镜的引导文档：https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

Answer 2

只需使用引导程序的不同断点列类。 如果您想更改引导程序 3 中的顺序(根据注释中的要求(，您可以轻松使用推拉。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6">1</div>
<div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-pull-6">2</div>
<div class="col-md-4 col-sm-6">3</div>
</div>

https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

Answer 3

使用col-sm-6在 1 行中设置 2 个divsm大小...

(计算是：12/6=2 => 100% /2=50%表示每个div都50%到他的width(

默认情况下，xs尺寸的屏幕将在 1 行中设置 1div，因为您没有另行指定......

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<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>
<div class="row" >
<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>
</div>