在引导程序中更改列顺序答案

【问题标题】：Change columns order in bootstrap在引导程序中更改列顺序
【发布时间】：2014-08-12 20:25:18
【问题描述】：

我正在尝试更改页面布局的列顺序。在这里，我使用 bootstrap 并尝试使用 .col-sm-push-* 和 .col-sm-pull-* 修饰符类。但我无法让它工作。

我的 HTML 是这样的 -

<section class="sidebar">
    .....
    .....
    .....
</section> <!-- /.sidebar -->

<section class="content">
    .....
    .....
    .....
</section> <!-- /.content -->


<section class="request">
    .....
    .....
    .....
</section> <!-- /.request -->

有 3 列，现在我需要根据屏幕尺寸以不同方式显示它们。

在较小和较大的屏幕尺寸中，我需要将它们显示在一行中。像这样，

[sidebar] [content] [request]

在超小尺寸，我需要改变它的顺序，像这样

[content]
[request]
[sidebar]

这就是我在Less 文件中尝试的方式。但它不适合我。

.sidebar {
    .make-sm-column(3);
    .make-sm-column-pull(3)

    .....
}   

.content {
    .make-sm-column(5);
    .make-sm-column-push(5)

    .....
}   

.request {
    .make-sm-column(4);
    .make-sm-column-pull(4)

    .....
}

希望有人可以帮助我解决这个问题。谢谢你。

【问题讨论】：

.pull-right 可以解决问题...
你的意思是，拉右类？
是的，试试看，但我很困惑新版本是否有......只是检查它......
@C-linkNepal，我不确定如何使用这些类来更改布局的列顺序...

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 3 是一个移动优先框架。因此，您应该首先将您的 HTML 结构更改为您想要的移动结构。比如这样：

<section class="content">
    .....
</section> <!-- /.content -->

<section class="request">
    .....
</section> <!-- /.request -->

<section class="sidebar">
    .....
</section> <!-- /.sidebar -->

接下来，您应该添加 pull 和 push 分配，就像您已经尝试过的那样。但是你逻辑错了，你需要根据其他应该“跳转”的元素来拉/推元素。

我不知道LESS 语法，但是使用CSS 类，您的标记将如下所示：

<div class="row">
<section class="content col-md-5 col-sm-push-4">
    Content
</section> <!-- /.content -->

<section class="request col-md-4 col-sm-push-3">
    Requests
</section> <!-- /.request -->

<section class="sidebar col-md-3 col-sm-pull-9">
    Sidebar
</section> <!-- /.sidebar -->
</div>

也许在LESS 会是这样的：

.sidebar {
    .make-sm-column(3);
    .make-sm-column-pull(9)

.....
}   

.content {
    .make-sm-column(5);
    .make-sm-column-push(4)

    .....
}   

.request {
    .make-sm-column(4);
    .make-sm-column-push(3)

    .....
}

但请记住先更改您的 HTML 结构！

Working Example

【讨论】：

感谢您的解决方案。你能解释一下这背后的逻辑吗
在您的示例中，Sidebar 是最后一个 col，前面有一个 col-5 和一个 col-4。现在你想让它成为第一个 col，因此你必须拉它 9 (5 + 4) cols。另一方面，Content 是第一个 col，应该移动到第二个 col-4。因此它必须在 4 点之前被推动。我希望你明白我的意思..
也许尝试玩一下我创建的 bootply，直到您了解概念。一旦你理解了它，它真的很容易.. ;)
令人困惑的是如何使用pull 和push 类及其编号。
使用push 将事物“向前”移动，使用pull 将事物“向后”移动。数字是要“跳过”的列号，例如 col-5 + col-4 = 'skip' 9。

【解决方案2】：

你可以试试这个：

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
    <section class="sidebar col-xs-6 col-md-4">Sidebar</section>

    <section class="content col-xs-6 col-md-4">Content</section>

    <section class="request col-xs-6 col-md-4">request</section>
</div>

您可以在这里找到更多信息：Bootstrap 3

希望对您有所帮助。

【讨论】：

【解决方案3】：

对于列重置，请结合使用 .clearfix 和响应式实用程序类 .visible-xs-block

<div class="container">
    <div class="row">
        <section class="col-xs-4 col-sm-push-4">Content</section>
        <div class="clearfix visible-xs-block"></div>
        <section class="col-xs-4 col-sm-push-4">Request</section>
        <div class="clearfix visible-xs-block"></div>
        <section class="col-xs-4 col-sm-pull-8">Sidebar</section>
    </div>
</div>

Codepen 中的示例

【讨论】：