另一个带有引导程序的导航栏下方的两个导航栏

Question

我从 Bootstrap 开始，导航栏元素有一个小问题。我需要声明一个宽度为 1024px 的容器，并且必须添加两个导航栏。在顶部，另一个在它下面。两个导航栏都需要与右侧 div 的距离为 0px。

（Stackoverflow 不想让我发布图片，但我认为如果你能明白我的意思会更容易：http://www.abload.de/img/asdjraik.png）

如您所见，第一个导航栏工作正常，但现在我需要在它下面再添加一个。它下面的容器的填充应该正好是 5px。

我的问题是，另一个导航栏从顶部获得与第一个导航栏相同的填充。我不能让它低于另一个。当我为这个问题定义以下类时，会出现另一个类：

.small-margin {
    margin-top: 20px;
}    

.big-margin {
    margin-top: 110px;
}

我的 HTML 如下所示：

    <div class="navbar small-margin">
        <div class="navbar-inner">
            <div class="pull-right">
                <ul class="nav">
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="navbar big-margin">
        <div class="navbar-inner">
            <div class="pull-right">
                <ul class="nav">
                    <li><a href="#">another link 1</a></li>
                    <li><a href="#">another link 2</a></li>
                </ul>
            </div>
        </div>
    </div>

第二个导航栏出现在第一个导航栏的左侧而不是下方。我尝试了很多 CSS 修复。

有人知道如何将第二个导航栏放在第一个下方吗？

提前致谢！

Answer 1

我已经尝试过你的代码，它的工作原理

我也尝试将其添加到 1024px 容器中

.container{
    max-width: 1024px;
}

这是结果

您的 css 代码必须与引导程序冲突。也许你可以尝试用.row 包裹每个导航栏。我相信这个解决方案肯定会让所有导航栏分开。

<div class="row-fluid">
  <div class="span12">
    ... navbar 1 ...
  </div>
</div>


<div class="row-fluid">
  <div class="span12">
    ... navbar 2 ...
  </div>
</div>