Question

我在屏幕左侧放置了一些内容，在右侧放置了一个导航栏。

这是代码（简化）：

<div class="row" align="center">
            <div class = "col-md-12">
                <div class = "container">
                    <div class = "row">
                        <div class = "col-md-9">
                            //Here some content
                        </div>
                        <div class = "col-lg-2 col-md-3">
                            <nav class="navbar navbar-default navbar-collapse">
                              <div class="container-fluid">
                                  <ul class="nav navbar-nav">
                                    <li><a href="#">option1</a></li>
                                    <li><a href="#">option2</a></li>
                                    <li class="dropdown">
                                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">option3 <span class="caret"></span></a>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">number1</a></li>
                                        <li><a href="#">number2</a></li>
                                      </ul>
                                    </li>
                                    <li><a href="#">option4</a></li>
                                  </ul>
                              </div><!-- /.container-fluid -->
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
</div>

在大屏幕和中型屏幕（col-lg和col-md）上显示如下：

[THE CONTENT][THE NAVBAR]

但是当我缩小屏幕时，navbar会移到屏幕底部的内容下。

[THE CONTENT]
[THE NAVBAR]

当我将屏幕缩小（col-sm和col-xs）而不是底部时，我想要的是在屏幕顶部（内容上方）分配导航栏。像这样：

[THE NAVBAR]
[THE CONTENT]

有可能吗？我怎样才能实现它？

P.S：根据Igor Ivancha回答，我试过：

<div class="col-sm-9 col-sm-push-3">
   //Here some content
</div>
<div class="col-sm-3 col-sm-pull-9">
   //Here the navbar
</div>

但它也不起作用。

提前致谢！

Answer 1

如果您需要更改网格列的顺序，Bootstrap有-pull-*和-push-*类：

<div class = "col-md-3 col-md-push-9">
  //Here navbar
</div>

<div class = "col-md-9 col-md-pull-3">
  //Here some content
</div>

jsfiddle

Answer 2

Igor基本上已经拥有了它，但是颠倒了div和“推/拉”类的顺序。

<div class = "col-md-3 col-md-push-9">
  //Here navbar
</div>

<div class = "col-md-9 col-md-pull-3">
  //Here some content
</div>

jsfiddle

Answer 3

在导航栏和内容

之前的列中添加ID

    <div class="col-md-9" id="theContent">
    ...
    <div class="col-lg-2 col-md-3" id="theNavbar">
    ...

然后添加一些jQuery来移动它们：

 if ($(window).width() <= 997) {
    $('#theNavbar').insertBefore($('#theContent'));
  }

  if ($(window).width() > 997) {
    $('#theNavbar').insertAfter($('#theContent'));
  }

<强> jsfiddle

编辑：更新了jsfiddle

如何在屏幕右侧放置一个导航栏，然后在Bootstrap顶部放置导航栏？

3 个答案: