使用推/拉更改Bootstrap中col-*-12列的顺序 [英] Change the order of col-*-12 columns in Bootstrap using push/pull
问题描述
我有两列相同大小(.col-xs-12
)的列,当屏幕尺寸与移动设备的屏幕尺寸相对应时,我会更改它们的位置.我将它们以相反的顺序放置.
I have two columns of the same size (.col-xs-12
) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.
我已经阅读过push和pull bootstrap指令有助于实现这一目标,但是是否可以通过以下类更改两个相同大小的列的位置?
I have read that push and pull bootstrap directives help to accomplish that, but is it possible to change the place of two columns of the same size with the following classes?
div.col-xs-12.col-xs-push-12
p test1
div.col-xs-12.col-xs-pull-12
p test2
推荐答案
实际上,您不能通过push
/pull
帮助器类对具有.col-*-12
的列进行重新排序.列的总和超过了@grid-columns
定义的默认12
列.
Actually you can not reorder the columns having .col-*-12
by push
/pull
helper classes. The sum of columns exceeds the default 12
columns which is defined by @grid-columns
.
您可以更改HTML中列的顺序,然后在较大的屏幕上使用排序类,如下所示:
You could either change the order of columns in HTML and then use the ordering classes on larger screens as follows:
EXAMPLE HERE
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>test2</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<p>test1</p>
</div>
</div>
或使用 这种奇特的方法 ,可以颠倒彼此垂直放置的列的顺序:
Or use this fancy approach to reverse the ordering of the columns that are placed vertically under each other:
EXAMPLE HERE
@media (max-width: 767px) {
.row.reorder-xs {
transform: rotate(180deg);
direction: rtl; /* Fix the horizontal alignment */
}
.row.reorder-xs > [class*="col-"] {
transform: rotate(-180deg);
direction: ltr; /* Fix the horizontal alignment */
}
}
值得注意的是, IE9 也支持CSS转换 ;只是不要忘记添加供应商前缀.
It's worth noting that CSS transforms are supported in IE9 as well; Just don't forget to add vendor prefixes.
这篇关于使用推/拉更改Bootstrap中col-*-12列的顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!