Question

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

我有一些我无法弄清楚的问题：

当我将屏幕宽度减少到769px时，为什么我的徽标和社交图标会消失？
为什么我的徽标和社交图标就在页面顶部？
我的社交图标太小，彼此相邻。我该如何改变？

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

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

Answer 1

.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在屏幕宽度为768px之前不会显示。

还有（用于徽标）：

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

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

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

我认为是因为您正在使用position:absolute;尝试使用position: relative;代替

导航栏以769px宽度消失

3 个答案: