Question

我无法将标记为class="navbar-text"的文字与导航栏中的其他链接保持一致。建立Bootstrap 3 example for a fixed top navbar之后，我注意到，只要浏览器宽度小于768像素，可折叠菜单项就会显示没有正确间距的文本，并与菜单中的第一个链接对接：

Misaligned navbar

（http://www.bootply.com/98784）

“业务基础结构服务”文本是<p>标记为class="navbar-text"的{{3}}推荐标记。它没有折叠时看起来很好（浏览器宽度> 768像素）。而且，当我尝试将文本标记为<a>时，样式很好，一切看起来都很好。但是，它并不是一个链接，而是一个简单的文本串。我也尝试将<p>移出<ul>，但它仍然显示出奇怪的效果。任何有关如何解决这个问题的建议将不胜感激。谢谢！

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

How the navbar should look

编辑12/6/13：自Bootstrap v.3.0.3发布以来，此问题已部分解决。文本字符串现在显示在自己的行上，但没有正确的缩进（请参阅text strings in navbars）：

Text on its own line, but not indented properly

Answer 1

我不确定你为什么遇到Bootstrap布局的问题，但你只需要在移动尺寸上同步这两种元素的样式：

<强> Demo

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

更新：原来的小提琴丢失了，所以我试图重新创建它们。在回应OP关于Bootstrap v3.0.3的评论时，可以消除溢出语句。

<强> Demo 2

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

1 个答案: