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

Answer 3

.collapse class 看起来像这样：

.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;
}

这意味着直到屏幕宽度为 768px 时才会显示 .collapse。

还有（用于logo）：

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

这使得徽标向左浮动，因为屏幕宽度为 768px，与 .navbar-right 类似的 class 用于社交图标容器。

导航栏在 769px 宽度处消失

Nav bar disappears at 769px width

css

nav

navbar

twitter-bootstrap

twitter-bootstrap-3