导航栏在 769px 宽度处消失

Question

我正在使用 Bootstrap navbar-fixed-top 方法来创建浮动导航栏。

我有几个问题我想不通：

• 当我将屏幕宽度减小到 769 像素时，为什么我的徽标和社交图标消失了？
• 为什么我的徽标和社交图标位于页面顶部？
• 我的社交图标太小而且彼此相邻。我该如何更改？

http://codepen.io/dhruvghulati/pen/qrdNBm

我应该怎么做才能拥有更标准的持久导航栏？

Answer 1

我认为这是因为您使用 position:absolute; 尝试改用 position: relative;

Answer 2

您可能应该访问官方Bootstrap docs 以获取有关导航栏的更多信息。我会用它作为你的导航栏的模板，然后从那里开始：

<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

本质上，Bootstrap 将您的导航链接替换为该屏幕尺寸的汉堡按钮。此外，您应该为徽标提供适当的类（来自上面的代码）以确保它始终可见。要使导航栏贴在页面顶部，只需将navbar-fixed-top 类添加到导航标签即可。开始标签现在应该如下所示：<nav class="navbar navbar-default navbar-fixed-top">。

Answer 3

.collapse 类如下所示：

.collapse {
    display: none;
    visibility: hidden;
}

还有：

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
    visibility: visible!important;
}

这意味着 .collapse 在屏幕宽度为 768 像素之前不会显示。

还有（用于标识）：

@media (min-width: 768px)
.navbar-left {
    float: left!important;
}

由于屏幕宽度为 768px，因此徽标会向左浮动，.navbar-right 有类似的类，用于社交图标容器。