Question

我正在尝试更改页面布局的列顺序。在这里，我使用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)

    .....
}

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

Answer 1

Bootstrap 3是一个移动优先框架。因此，您应首先将HTML结构更改为所需的移动结构。像这样举例如：

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

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

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

接下来，您应该添加拉动和推送分配，就像您已经尝试过的那样。但是你的逻辑错误，你需要根据应该跳过的其他元素来拉/推元素。＃/ p>

我不知道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

Answer 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

希望有所帮助。

Answer 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

中的示例

在引导程序中更改列顺序

3 个答案: