Question

如何修复 overflow-y 类中的 .navbar-collapse.in 属性？折叠中的导航栏位于页面顶部：

下面显示它

在Bootstrap中，有两个属性

.navbar-collapse.in {
    overflow-y: auto;
}
.collapse.in {
    display: block;
}

但它仍然位居前列：/

这是HTML：

<div class="row">
            <!-- 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">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a id="logo" class="navbar-brand" href="index.php">
                <img src="images/logo_2.png" class="img-responsive" alt="">
              </a>

                <!-- 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="index.php">Link 1 <span class="sr-only">(current)</span></a></li>
                        <li><a href="">Link 2</a></li>
                        <li><a href="">Link 3</a></li>
                        <li><a href="">Link 4</a></li>
                        <li><a href="">Link 5</a></li>
                        <li><a href=""></a></li>
                    </ul>             
                    <form class="navbar-form" role="search" action="" id="cse-search-box">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="hidden" name="cx" value="" />
                            <input type="hidden" name="cof" value="" />
                            <input type="hidden" name="ie" value="" />
                            <input type="text" name="q" class="" />
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                    </div>
                </form>
                <script type="text/javascript" src=""></script>
            </div><!-- /.navbar-collapse -->
            </div><!-- navbar-header -->
           </div> <!-- row -->

和CSS：

/* Portrait & landscape phone */
@media (min-width: 768px) and (max-width: 1200px) {
  /* line 100, ../sass/layout/_main.scss */
  ul.list-unstyled {
    width: 100%;
    text-align: center;
  }
  /* line 105, ../sass/layout/_main.scss */
  ul.list-unstyled li {
    display: inline-block;
  }

  /* line 110, ../sass/layout/_main.scss */
  .navbar-header {
    float: none;
  }

  /* line 113, ../sass/layout/_main.scss */
  .navbar-left, .navbar-right {
    float: none !important;
  }

  /* line 116, ../sass/layout/_main.scss */
  .navbar-toggle {
    display: block;
  }

  /* line 119, ../sass/layout/_main.scss */
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* line 123, ../sass/layout/_main.scss */
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }

  /* line 127, ../sass/layout/_main.scss */
  .navbar-collapse.collapse {
    display: none !important;
  }

  /* line 130, ../sass/layout/_main.scss */
  .navbar-nav {
    float: none !important;
    margin-top: 50px;
  }

  /* line 134, ../sass/layout/_main.scss */
  .navbar-nav > li {
    float: none;
  }

  /* line 137, ../sass/layout/_main.scss */
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* line 141, ../sass/layout/_main.scss */
  .collapse.in {
    display: block !important;
  }
}
/*@media (min-width: 480px) and (max-width: 768px) {
  /* rules for mobile horizontal (480 > 768)  
  /* line 149, ../sass/layout/_main.scss */
  ul.list-unstyled {
    width: 100%;
    text-align: center;
  }
  /* line 154, ../sass/layout/_main.scss */
  ul.list-unstyled li {
    display: inline-block;
  }

  /* line 160, ../sass/layout/_main.scss */
  .alpha h4 {
    font-size: 1.5rem;
  }

  /* line 165, ../sass/layout/_main.scss */
  .btn-down .down {
    font-size: 1rem;
  }

  /* line 170, ../sass/layout/_main.scss */
  h1 {
    font-size: 1.5em;
    line-height: 1.25em;
  }

  /* line 174, ../sass/layout/_main.scss */
  .navbar-collapse.in {
    overflow-y: visible;
  }
}
@media (max-width: 480px) {
  /* line 181, ../sass/layout/_main.scss */
  .visible-xs {
    font-size: 2rem;
    text-align: center;
    padding: 0;
  }
  /* line 185, ../sass/layout/_main.scss */
  .visible-xs li {
    display: inline-block;
    margin-right: 1rem;
    width: 3rem;
    height: 3rem;
  }
   line 192, ../sass/layout/_main.scss 
  .visible-xs .fa-windows {
    color: #337AB7;
  }
  /* line 195, ../sass/layout/_main.scss */
  .visible-xs .fa-apple {
    color: #212121;
  }
  /* line 198, ../sass/layout/_main.scss */
  .visible-xs .fa-download {
    color: #F0AD4E;
  }
  /* line 201, ../sass/layout/_main.scss */
  .visible-xs .fa-search {
    color: #5BC0DE;
  }

  /* line 206, ../sass/layout/_main.scss */
  h4 {
    font-size: 1.5rem;
  }

  /* line 210, ../sass/layout/_main.scss */
  .btn-down .down {
    font-size: 1rem;
  }

  /* line 215, ../sass/layout/_main.scss */
  h1 {
    font-size: 1.5em;
    line-height: 1.25em;
  }

  /* line 220, ../sass/layout/_main.scss */
  .navbar-nav {
    margin-top: 0;
  }

  /* line 223, ../sass/layout/_main.scss */
  .navbar-collapse.in {
    overflow-y: visible;
  }

  /* line 226, ../sass/layout/_main.scss */
  .navbar-text {
    margin-left: 0;
  }

  /* line 230, ../sass/layout/_main.scss */
  .l-header .navbar-brand > img {
    margin: -10px;
  }
}
@media (max-width: 320px) {
  /* line 237, ../sass/layout/_main.scss */
  .navbar-text {
    font-size: 1rem;
  }
}

Answer 1

您错过了添加导航标记。 http://getbootstrap.com/components/#navbar

移动时折叠的Bootstrap导航栏

1 个答案: