Question

使用Bootstrap时出现CSS / HTML问题。出于某种原因，导航似乎没有推下随后的HTML方面。见https://jsfiddle.net/xaazf6u2/

 <div id="topNavigation">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BCF</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown"><a href="/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">History <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="/history.php?site=FGT">FGT</a></li>
                    <li><a href="/history.php?site=BB">BB</a></li>
                  </ul>
                </li>
            </ul>
            <ul id="login" class="nav navbar-nav navbar-right"></ul>
        </div><!--/.nav-collapse -->
    </div>
  </nav>
</div>
<div id="pageContent" class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
  </div>
</div>

从示例中您可以看到jumbotron应在导航http://getbootstrap.com/examples/theme/

下方留出一些空间

Answer 1

使用固定导航栏时，Bootstrap建议您在身体上添加填充以防止出现此问题。所以在CSS中你需要添加

body { padding-top: 70px; }

Answer 2

导航栏为position:fixed，以便在滚动时保留在屏幕上。具有固定位置的元素不会影响其他元素的布局，因此您需要手动设置边距或填充。

有关此问题的说明，请参阅Bootstrap documentation。

需要身体填充

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

body { padding-bottom: 70px; }

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

Answer 3

班级＆＃34; navbar-fixed-top＆＃34;表示内容可滚动并位于导航栏下。

如果您想保留此功能或删除＆＃34; navbar-fixed-top＆＃34;，请在内容中添加margin-top。如果你没有上课，

Answer 4

默认情况下，导航栏固定在顶部，您可以通过删除类＆＃39; navbar-fixed-top＆＃39;来更改它。

身体不低于Bootstrap导航

4 个答案: