引导v4推拉消失
引导v4推拉消失
提问于 2017-11-12 16:54:51
查看引导v4更新：
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...Dropped推和拉修改器类为新的柔性箱驱动订单类.例如，您应该使用.col-8.order-2和.col-4.order-1，而不是.col-8.ush-4和.col-4.pl-8。
但是，当我使用order函数时，它的工作方式似乎与推拉方法不同。它将行堆叠起来，就像下面代码中的第一行一样。
我的目标是在左边有一个img，在一行上有一个文本，然后在左边有一个文本，在桌面上的下一行有一个img。当它在一个较小的屏幕上调整大小时，我希望每一张图像都堆放在它对应的文本上。
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-12 17:42:06
如果您想要更改顺序，例如在md上，您可以为该大小定义第一个正常顺序，然后为所有较小的大小定义order-n。所以你的代码应该是这样的。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
img
</div>
<div class="col-md-8">
text
</div>
</div>
<div class="row">
<div class="col-md-8 order-2 order-md-1">
text
</div>
<div class="col-md-4 order-1 order-md-2">
img
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47251394
复制相关文章
相似问题
腾讯云开发者
