17

如何在引导程序中重新排列/交换某些流体容器/行的顺序.....

如果我们在下一页以引导程序的流体示例为例：

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

他们在左侧有一个流畅的行中的侧边栏，然后在同一行中有一个英雄单位。然后是下一行的一些内容。当我们切换到移动视图/小屏幕时，它会以相同的顺序出现。但是我们怎样才能改变这个顺序。即如何在页面顶部显示最后的侧边栏和英雄单元？

4

6 回答 6

29

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

列排序

.col-push-* and .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

于 2013-08-01T08:18:28.953 回答
21

您必须记住，网格默认情况下不支持此功能，但有一些方法可以解决此问题。

例如，您可以反转两个跨度（设置移动视图的顺序）并使用浮动强制正常定位：

<div class="row-fluid">
    <div class="span9 pull-right">
        <!-- ... -->
    </div><!--/span-->
    <div class="span3 pull-left">
        <!-- ... -->
    </div><!--/span-->
</div><!--/row-->

然后，.span对于较小的屏幕，元素或多或少会被正确修改，但是您仍然有一些规则可以解决此问题：

.row-fluid .pull-left[class*="span"]:last-child { margin-left: 0; }

@media (max-width: 767px) {
    .row-fluid .pull-right[class*="span"] { float: none; }
}

如果您使用多于两列，则必须反转.pull-right元素的边距（最后一个除外） - 例如：

.row-fluid .pull-right[class*="span"] { margin-right: 2.5641%;margin-left: 0; }
.row-fluid .pull-right[class*="span"]:first-child { margin-right: 0; }

现场演示（jsfiddle）和全屏（某些样式必须在正常和响应之间设置，因此样式面板中的 jsfiddle “hack”）

于 2012-10-15T22:26:27.773 回答
1

如果你希望你的侧栏在你的英雄之下但高于其他东西，那将需要一些 dom 操作，因为这不仅仅是将列表放在所有内容之前/之后的问题，而是放在元素之间。像这样的东西应该工作：

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#sidebar").insertAfter($("#hero"));
    } else {
        $("#sidebar").prepend($("#containingrow"));
    }
});
于 2012-10-15T22:22:46.377 回答
1 
#wrapper {
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
}

#wrapper > div {
    width: 100%;
}

#header {
    order: 1;
    -webkit-order: 1;
}

#mainMenu {
    order: 2;
    -webkit-order:2;
}

#content {
    order: 3;
   -webkit-order:3;
}

#sidebar {
    order: 4;
    -webkit-order:4;
}

来源：http ://www.reddit.com/r/css/comments/1v1gv7/change_order_of_divs_with_css/

于 2014-07-25T16:24:58.937 回答
0

我正在开发一个用于对 Bootstrap 网格进行排序和添加元素的插件。目前它非常粗糙和脆弱，但如果仅用于基本功能，我相信它可以在生产环境中生存。

该插件要求网格保持一致，所有特定宽度的跨度，但它可能对此有所帮助。

最好在标记呈现之前完成所有这些类型的工作，但在某些情况下，由于我被迫使用的某些模板语言的限制，我无法预先排序，因此我使用 Bootstrap。

Github
代码笔

于 2013-06-29T19:05:32.497 回答
-1

您可以使用媒体查询来做到这一点，这是 CSS3 提供的一种新的可能性。

例如，通过媒体查询，您可以创建仅应用于某些类型的屏幕的样式。如果你想制作你所说的那个东西，你可以像这样：

@media only screen and (max-device-width: 480px) {
      .sidebar { width: 100%; bottom: 0%; blahblah: something;  }
}

只有当屏幕的宽度小于 480 像素时，才会应用该样式。这个解决方案实际上并不依赖于引导程序，而是依赖于 CSS3。

顺便说一句，如果您包含 bootstrap.responsive.css （也由 bootstrap 框架提供），您的布局将自动成为单列布局，但可能不是您想要的顺序。

于 2012-10-15T19:39:33.370 回答