如何在移动布局上更改Bootstrap 3列顺序？ [英] How do I change Bootstrap 3 column order on mobile layout?

问题描述

我正在做一个响应式布局与顶部固定的导航栏。下面我有两列，一个用于侧边栏（3），一个用于内容（9）。其在桌面上的显示效果为

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on desktop looks like this

navbar

[3] [9]

navbar
[3][9]

当我 resize 移动时， navbar 和隐藏，然后侧边栏堆叠在内容的顶部，像这样：

When I resize to mobile the navbar is compressed and hidden, then the sidebar is stacked on top of the content, like this:

navbar

[3]

[9]

navbar
[3]
[9]

我想要在顶部显示主要内容，因此我需要更改订单移动到此：

I would like the main content at the top, so I need to change the order on mobile to this:

navbar

[9]

[3]

navbar
[9]
[3]

我发现

I found this article which covers the same points, but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap.

这是我的代码：

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

推荐答案

您不能在较小的屏幕中更改列的顺序，

You cannot change the order of columns in smaller screens but you can do that in large screens.

因此请更改列的顺序。

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

默认情况下，首先显示主要内容。

By default this displays the main content first.

因此，在移动主内容中首先显示。

So in mobile main content is displayed first.

使用 col-lg-push 和 col-lg-pull 我们可以在大屏幕中重新排列列，并在左侧显示侧边栏和右侧的主要内容。

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

工作在这里。

这篇关于如何在移动布局上更改Bootstrap 3列顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！