查看 bootstrap v4 更新:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
但是当我使用 order 函数时,它似乎与 push pull 方法的工作方式不同。就像下面代码中的第一行一样,它将行堆叠起来。
我的目标是在左侧有一个 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>
最佳答案
如果您想更改订单,例如 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>
关于html - bootstrap v4 推拉不见了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47251394/