Question

我正在尝试使用Bootstrap 3.2。我正在尝试创建一个固定的顶部导航栏，但我遇到了两个问题：

导航栏与其下方的内容重叠。
导航栏似乎远离屏幕右侧。这使得导航栏中的按钮不可见，除非将窗口宽度拖动到较小的尺寸。

对于第一个问题，我通过在我的css文件中添加一个类来跟踪Bootstrap example tip，包括html文档中Bootstrap css文件下面的这个文件，然后引用该类。

.navbar-height{
    body{padding-top: 200px;}
}

<body class="navbar-height">

尽管如此，这似乎什么都不做（正如你所看到的那样，我指出这个数字非常高，希望看到一个戏剧性的变化，但这并没有发生）。

这是我的导航栏：

<header id="header-navigation">
        <div id="nav-bar-container">
            <nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div id="nav-item-container" class="container-fluid">
                    <div id="drop-down" class="navbar-header">
                        <button type="button" class="btn btn-default navbar-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div id="home-button" class="navbar-left">
                            <a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
                        </div>
                    </div>
                    <div id="user-dropdown" class="navbar-collapse collapse">
                        <ul class="dropdown-menu" id="dropdown-items" role="menu">
                            <li>
                                <div class="list-group-item">
                                    <div class="row-picture">
                                        <img class="circle" src="" alt="icon"></img>
                                    </div>
                                    <div class="row-content">
                                        <h4 class="list-group-item-heading">Placeholder</h4>
                                        <p class="list-group-item-text">Placeholder</p>
                                    </div>
                                    <div class="list-group-seperator"></div>
                                </div>
                            </li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span></a></li>
                        </ul> 
                    </div>
                </div>
            </nav>
        </div>
</header>

作为上述代码的快速细分，我有一个<header>标记，用于保存导航栏。在这个<header>中，我有一个包含<div>（id =“nav-bar-container”），其唯一目的是充当导航栏的容器（也许我会添加其他东西到标题，并希望保持酒吧分开）。然后，我有实际的<nav>，它有适当的类（或者我认为）：“navbar navbar-default navbar-fixed-top”。下一个<div>（id =“nav-item-container”）包含导航栏的组件。以下<div>（id =“下拉列表”）包含按钮（似乎在全屏幕上消失）和带有“品牌”的链接，该链接似乎总是可见的。最后一个主要<div>包含按下按钮时的“下拉”内容。

我的问题：为什么我的导航栏与其下方的内容重叠并向右延伸以隐藏按钮？

Answer 1

好的，首先，您不需要<header>标记，因此请随意将其删除。

其次，从navbar-fixed-top上的文档中，您需要填充：

body { padding-top: 70px; }

注意您已将其应用于标题样式;这是行不通的。将它涂抹在身体上，效果很好。

就第二个问题而言，当我删除时，我实际上看不到任何水平滚动 <header>标记，所以我认为这可能导致了问题。

查看此Bootply示例：

Bootply Example

看看我的意思。这是删除了标签的代码。希望有所帮助！

Answer 2

更改..

.navbar-height{
    body{padding-top: 200px;}
}

要..

body.navbar-height{
    padding-top: 200px;
}

你想要身体上的填充物。这将使你的身体向下推200px，为你的固定导航栏顶部排水沟。

您很可能希望根据导航栏的实际高度调整此填充。

Answer 3

对于第二个问题，我认为导航栏从屏幕向右溢出，这只是代码布局中的一个错误。我正在将我想要在右边显示的按钮分组，并在“navbar-header”中使用该品牌。这样做是显示品牌，但仅在移动屏幕上使用该按钮来隐藏或显示其关联的下拉列表。这就是为什么当我通过拖动窗口使宽度变小时我只看到按钮的原因。为了解决这个问题，我删除了按钮并将其放在相应的代码块中。所以，我的“navbar-header”现在看起来像这样：

<div id="drop-down" class="navbar-header">
    <div id="home-button" class="navbar-left">
        <a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
    </div>
</div>

现在，接下来在id =“nav-item-container”父级div中，我创建了一个项目列表（ul）。此列表包含导航栏中的项目，其类别为“nav navbar-nav navbar-right”。此列表中的每个列表项（li）都是导航栏中的项目。下拉按钮及其内容必须包含在同一列表项（li）中。确保下拉元素的父级列表项包含类“下拉列表”。然后，按钮或链接应该应用“dropdown-toggle”类。下拉项目本身（也可以是项目列表，通常是）应该有“下拉菜单”类。例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <span class="glyphicon glyphicon-align-justify"></span>
    </a>
    
    <ul class="dropdown-menu" id="dropdown-items" role="menu">
      <li>
    	<div class="list-group-item">
    	  <div class="row-picture">
    		<img class="circle" src="" alt="icon"></img>
    	  </div>
    	  <div class="row-content">
    		<h4 class="list-group-item-heading">Placeholder</h4>
    		<p class="list-group-item-text">Placeholder</p>
    	  </div>
    	  <div class="list-group-seperator"></div>
    	</div>
      </li>
      <li><a href="#"><span class="glyphicon glyphicon-log-out"></span></a></li>
    </ul> 

  </li>
</ul>

请注意，在代码段中我没有包含父级导航，div或标题，因此它可能无法正常工作。另外，我通过引用the Bootstrap component page,以及the Bootstrap material design page（Bootstrap的插件，它提供了Google Material Design外观和感觉的所有内容）来自行计算出大部分内容。所以，我不确定我所说的所有“规则”是否是强制性的，或者是否有其他方法可以实现这一点。

对于第一个问题，我只是用css犯了一个愚蠢的错误，另外两个答案提供了正确的修复方法。我所要做的就是像这样修复身体css：

body{
    padding-top: 200px;
}

在bootstrap中溢出导航栏

3 个答案: