由于顶部导航栏固定，面包屑未显示。

Question

我在页面中定义了如下的标记:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>   <a class="navbar-brand" href="#">Project name</a>

    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-pills">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">Companies</a>
            </li>
            <li><a href="#">Help</a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <ul class="breadcrumb">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li class="active"><a href="#">Help</a>
            </li>
        </ul>
    </div>
</div>

当页面渲染时，面包屑导航隐藏在导航栏后面。有没有使用Bootstrap修复它的方法？还是这是一个错误？

附注：jsFiddle链接：http://jsfiddle.net/KNsYt/2/

- deostroll

---

老实说，我怀疑这是一个 bug。我尝试在内容周围添加 class="container"，但没有任何改变。它必须按照 Bootstrap 的方式进行吗？或者你可以在 breadcrumb ul 中添加 class="pushdown"，并在你的样式中加入 .pushdown {margin-top:50px} 吗？ - StackExchange What The Heck

@yochannah。显然，这不是一个错误。 - Ravimallya

Answer 1

在 Bootstrap 文档 中已经清晰地定义如下：

需要内容填充

固定的导航栏将覆盖您的其他内容，除非您在 顶部添加填充。尝试使用您自己的值或使用我们下面的代码片段。提示：默认情况下，导航栏高度为 50 像素。

因此，请给主体添加 50 像素或更多像素的填充来解决此问题。查看这个示例。

请确保在核心 Bootstrap CSS 之后包含此代码。

body {
padding-top:60px
}

- Ravimallya