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>

当页面呈现出导航栏隐藏在导航栏后面时。修复它的任何引导方式？或者这是一个错误吗？

Ps：jsFiddle：http://jsfiddle.net/KNsYt/2/

Answer 1

bootstrap documents本身明确定义如下：

需要身体填充

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

因此，给身体提供50或更多像素的填充以解决问题。检查此fiddle。

确保在核心Bootstrap CSS之后包含此内容。

body {
padding-top:60px
}

由于导航栏固定在顶部而没有出现面包屑

1 个答案: