html - Bootstrap 3 可折叠导航栏文本和链接未对齐

Question

我在保留带有 class="navbar-text" 标记的文本时遇到问题与导航栏中的其他链接一致。构建于Bootstrap 3 example for a fixed top navbar ，我注意到，只要浏览器宽度小于 768 像素，可折叠菜单项就会显示没有适当间距的文本，并与菜单中的第一个链接对接:

( http://www.bootply.com/98784 )

文本“业务基础设施服务”是 <p>标记为 class="navbar-text"推荐为 text strings in navbars 。当它不折叠时(浏览器宽度> 768像素)看起来很好。而且，当我尝试将文本标记为 <a> 时，造型很好，一切看起来都很好。但是，它并不是一个链接，而是一个简单的文本字符串。我还尝试过移动 <p>出<ul> ，但它仍然显得很奇怪。任何有关如何解决此问题的建议将不胜感激。谢谢!

编辑 12/5/13:如果我不清楚我想要实现的目标，我深表歉意。基本上，我想要 <p class="navbar-text">出现在自己的行上，就像 <ul> 中的其他链接一样，像这样:

编辑 12/6/13: 自 Bootstrap v. 3.0.3 发布以来，此问题已部分解决。文本字符串现在显示在自己的行上，但没有正确的缩进(请参阅 https://github.com/twbs/bootstrap/issues/11735 ):

Answer 1

我不太确定为什么您在使用 Bootstrap 布局时遇到问题，但您只需要在移动设备尺寸上同步两种类型的元素样式即可:

<强> Demo

@media (max-width: 767px) {    
    p.navbar-text {
        margin: 0;
        padding: 10px 15px;
    }
    .navbar li {
        overflow: hidden;
    }
}

---

更新:原来的 fiddle 丢失了，所以我尝试重新创建它们。为了响应OP关于Bootstrap v3.0.3的评论，可以消除溢出语句。

<强> Demo 2