限制bootstrap导航栏中的宽度

Question

 <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 -->

那就是我的导航栏，它有五个项目，我看到链接后的额外间隙5 目前文本和导航栏都在“span12”和“row”中，然后“这里的大文本”在“span6”中，导航栏在“span5 offset1”中我尝试使用span4进行导航但是它需要链接到下一行，现在我应该怎么做才能让我的link5导航栏看起来像其他人一样？

Answer 1

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

jsFiddle：Demo

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

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

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