如何在bootstrap中堆叠div？

Question

我正在尝试制作一个带有1号图片的导航栏，2号div上的文字，然后是div 3上的导航栏（图片是我的向导）。不知道怎么把它放在一起3号。

<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <!-- split into 2 halves start centering-->
    <!-- splits to 2 columns -->
    <!-- makes number 1-->
    <div class="col-xs-6 bg-one text-center">
    </div>
  </div>
  <!-- makes number 2-->
  <div class="col-xs-6 bg-two text-center">
  </div>
  <div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Answer 1

对于第一张图片使用class="pull-left"

对于第二张图片使用class="pull-right"

第三次使用class="col-lg-12 col-md-12 col-sm-12 col-xs-12"

Answer 2

看起来你可能会有一个额外的结束</div>，所以你在.bg-two之前关闭了你的标题。

希望有所帮助！