Bootstrap：适合每个浏览器的响应式导航栏

Question

我的网站有一个非常长的导航栏，可以在计算机浏览器上完美显示。但是，当我在平板电脑或较小的浏览器上加载网站时，导航栏会变为2行。

像这样：

现在我的问题是，是否可以使导航栏更小或文本以便导航栏显示它应该？像这样： http://puu.sh/90e1O.png

我尝试过使用Viewport，但这对我没什么帮助：/这是一个实时预览： http://website.craftshark.net/mcprofile/

您可以通过检查员模式获取代码。我在这里有一个导航的要点，但它可能是不完整的：https://gist.github.com/matthijs110/b7c554f0abd4c38fa3c4

有人知道如何解决这个问题吗？

Answer 1

试试这个，它应该有效http://www.bootply.com/mjEnd2pAem

我不建议在第44-46行使用此功能：

<ul class="domain">
    <li><h4 id="domain" title="<?php echo $lang['NAV_IP-TOOLIP'] ?>">play.domain.com</h4></li>
</ul>

因为您使用自定义类包装url并且引导菜单的css不影响此部分。最好将其放入a并将自定义类添加到a而不是ul

编辑： 实际上，如果分辨率小于993px，它会分成2行。让我看看我能否找到另一种解决方案

Answer 2

我认为问题在于您对id = domain的div使用自定义padding-left，并使用html标记包装link play.domain.com。 Bootstrap使用css选择器，如.navbar-nav>li>a。 <h4>.没有地方尝试使用Bootstrap的导航栏，因为它没有自定义缩进（填充，边距），一切都会正常工作。