Question

如何安排HTML以显示带有bootstrap 3的两个堆叠导航栏？在ASCII艺术中，布局应如下所示：

+-------+
| a b c |
+-------+
| d e f |
+-------+
|  ...  | <- rest of the page

其中a，b，c，d等等是按钮。

我想在宽屏幕上也显示这种布局，它只是一种分组控件的方式。请注意，说两个堆叠的工具栏我的意思是两个可视导航栏，因为从类的角度来看，我希望有一个共同的父navbar类，否则固定的定位可能导致重叠两个导航栏。

Answer 1

没有答案，我不得不接受试验和错误，目前我最好的猜测如下：

<nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">a</a>
      </li>
      <li><a href="#">b</a>
      </li>
      <li><a href="#">c</a>
      </li>
    </ul>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">d</a>
      </li>
      <li><a href="#">e</a>
      </li>
      <li><a href="#">f</a>
      </li>
    </ul>
  </div>
</nav>

Demo here（加宽页面或点击Ctrl + Shift + Return以在新页面上加载草稿，因为预览很窄，工具栏可能会崩溃）

即使我对崩溃行为不感兴趣，我也必须添加collapse类才能水平对齐按钮，否则每一个都垂直堆叠。

在bootstrap 3中堆叠两个导航栏

1 个答案: