twitter-bootstrap – 引导：如何更改流体行中的div的顺序？

发布时间：2020-12-18 00:16:11 所属栏目：安全来源：网络整理

导读：如何重新排列/交换一些流体容器/排的顺序….. 如果我们举例说明引导流程的例子在下面的页面上： http://twitter.github.com/bootstrap/examples/fluid.html 他们在左边的侧边栏在一个流体排，然后一个英雄单位在同一排。然后在下一行的一些内容。当我们切换

如何重新排列/交换一些流体容器/排的顺序…..

如果我们举例说明引导流程的例子在下面的页面上：

http://twitter.github.com/bootstrap/examples/fluid.html

他们在左边的侧边栏在一个流体排，然后一个英雄单位在同一排。然后在下一行的一些内容。当我们切换到移动视图/较小的屏幕时，它按照相同的顺序显示。但是我们如何改变这个顺序呢？即如何在页面顶部显示侧边栏和英雄单元？

解决方法

Bootstrap v3的新版本现在支持列排序：

列排序

使用.col-push- *和.col-pull- *修饰符类轻松更改内置网格列的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">9</div>
  <div class="col-md-3 col-md-pull-9">3</div>
</div>

将给出以下顺序：

----------------------------
|     3     |      9       |
----------------------------

文档：
http://getbootstrap.com/css/#grid-column-ordering

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!