1 
 <div class="span12">
         <div class="row">
             <div class = "span6"><h1>The big text here</h1></div> <!-- end of span6--> 
             <div class = "span5 offset1">
             <nav class = "navbar">
             <div class = "navbar-inner">
             <ul class = "nav">
             <li><a href="">Link1</a></li><li class="divider-vertical"></li>
             <li><a href="">Link2</a></li><li class="divider-vertical"></li>
             <li><a href="">Link3</a></li><li class="divider-vertical"></li>
             <li><a href="">Link4</a></li><li class="divider-vertical"></li>
             <li><a href="">Link5</a></li>

             </ul><!-- end of nav -->
             </div><!-- end of navbarinner -->
             </nav><!-- end of nav -->
             </div> <!-- end of span4 -->
         </div> <!-- end row -->
     </div> <!-- span 12 -->

我的导航栏

所以这就是我的导航栏，它有五个项目，我看到 link5 之后的额外间隙
当前文本和导航栏都在“span12”和“行”中，然后“这里的大文本”在“span6”中导航栏在“span5 offset1”中，我尝试将 span4 用于导航栏，但它会将链接带到下一行，现在我应该怎么做才能让我的 link5 导航栏看起来与其他导航栏一样？

4

1 回答 1

3

似乎您需要.navbar向右浮动以停止 100% 宽度并使元素仅与其内容一样大

jsFiddle：演示

请注意在第 8 行标记的小提琴中，我添加了类.pull-right以使导航栏向右浮动。

还值得注意的是，.row该类的行为类似于 a .span12，因此您不必将菜单包装在其中。另请注意，如果窗口太窄，您的菜单项最终会堆叠，但这是另一个关于如何解决这个问题的主题。

作为一个额外的建议，您应该尝试更多地格式化您的代码，以便更容易阅读和调试。

于 2013-07-25T06:24:08.890 回答