Question

目前我正在与我的Bootstrap导航栏进行斗争。对于最大宽度为767px的设备，我希望导航栏固定在屏幕底部。所有较大的设备必须将导航栏固定在顶部。我已经在社区中阅读了一些相关的问题，它帮助了我，但还没有回答我的问题。

版本：Bootstrap 3.3.6 版本：Dreamweaver CC 2015

对我的问题使用媒体查询应该是答案，但我不知道如何。如果我是正确的，以下代码应该完成这项工作（如果我错了，请纠正我）：

.no-overflow{
    display:none;
}

我需要知道的是，如何在导航条形码中正确插入媒体查询：

@media (max-width: 767px) { 
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #d35500;
}

HTML代码底部修复：

<nav class="navbar navbar-default navbar-fixed-bottom">
  <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="#bottomFixedNavbar1"><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="bottomFixedNavbar1">
      <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-expanded="false">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <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-expanded="false">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

提前致谢！

Answer 1

你只需要一个小括号：

@media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #d35500;
    }
}

Answer 2

我不确定您的HTML是什么样的，但您想要做类似的事情

@media (max-width: 767px) {
    /* This select may need to changed */
    .navbar.navbar-fixed-top {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
    }
}

Answer 3

我自己找到了答案（在社区的帮助下）。我将发布它，这可能会帮助其他人。

@media (max-width: 767px) {

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #d35500;
  }
.navbar-toggle {
    color: #ffffff;
}
.navbar.navbar-default.navbar-fixed-top {
    display: none;
}



}

@media (min-width:768px){
.navbar.navbar-default.navbar-fixed-bottom {
    display: none;
}

}

我接近显示器：没有;码。感谢Bender，我意识到我必须在.navbar.navbar-default.navbar-fixed-bottom和.navbar.navbar-default.navbar-fixed-top中更改.overflow。

注意：对于想要这样做的人也是如此。确保您进行了2次媒体查询。 1表示不显示最大宽度为767px的顶部固定导航栏和1个不显示最小宽度为768px的固定导航栏的媒体查询。

Bootstrap：使用顶部和底部固定导航栏以获得不同的宽度

3 个答案: