两个导航栏位于另一个导航栏下方

Question

我从Bootstrap开始，并且navbar-element有一个小问题。我需要声明一个宽度为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>