内容后面的引导导航栏

Question

我正在使用引导程序制作网页，但在导航栏和页面内容重叠时遇到了以下问题。正常查看页面时一切正常，但在手机和平​​板电脑上显示时出现问题。

我想要实现的是，当单击导航栏的下拉按钮时，我希望其余内容向下移动。我不只是想用导航栏覆盖内容。

这是我的代码：

HTML：

 <nav class="navbar navbar-default navbar-custom navbar-centered" role="navigation">
        <div class="container-fluid glavni-meni">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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 class="navbar-brand" href="index.html">MNZ Maribor</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><a href="">Tekmovanja</a></li>
              <li><a href="">Klubi</a></li>
              <li><a href="">Reprezentance</a></li>
              <li><a href="">Grassroots</a></li>
              <li><a href="">Klub Klubu</a></li>
              <li><a href="">Obrazci in predpisi</a></li>
              <li><a href="">Trenerji in sodniki</a></li>
              <li><a href="">Delegati</a></li>
              <li><a href="">Razno</a></li>
              <li><a href="">Ugodnosti</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>

      <!--Main content of page-->
      <section id="main-content">
        <div class="container nekaj">
          <div class="col-lg-2 col-md-2 navigation">
            content content content content content content content content content content content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-md-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="img/example.jpg" alt="Los Angeles">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="Chicago">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="New York">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>

还有我的CSS：

.navbar-nav {
  width: 100%;
  >li {
    float: none;
    display: inline-block;
  }
}

.navbar {
  margin-top: 0px;
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
  font-family: 'Abel', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.navbar-toggle{
  border-color: #002d68 !important;
  background-color: #ffff01 !important;
}

.navbar-default .navbar-toggle:hover {
    background-color: #ffff01 !important;
}

.navbar-toggle .icon-bar{
  background-color: #002d68 !important;
}

.navbar-brand{
  color: #002d68 !important;
}

.navbar-default {
  background-color: #ffff01;
  height: 40px;
}

.navbar-default .navbar-nav>li>a {
  color: #002d68 !important;
}

.glavni-meni {
  background-color: #ffff01;
}



#main-content{
  background-image: url('../img/football-field.jpg');
  background-repeat:no-repeat;
}

还有我的移动 CSS：

@media (min-width: 768px) {
  .navbar-brand {
    display: none;
  }
  .navbar-centered .navbar-nav {
    float: none;
    text-align: center;
  }
  .navbar-centered .navbar-nav>li {
    float: none;
  }
  .navbar-centered .nav>li {
    display: inline;
  }
  .navbar-centered .nav>li>a {
    display: inline-block;
  }

  .container-fluid {
    padding-right: 80px;
    padding-left: 80px;
  }
}

Answer 1

第一个问题。

导航栏出现在内容的顶部（最好说内容在导航栏下方），因为.navbar-default 有一个height:40px。你应该使用height:auto。添加特定路径以覆盖引导 css，例如 body .navbar-default

第二个问题

要更改移动导航栏的断点（出现在768px 之前），您应该使用以下代码：change navbar breakpoint（查看引导程序 3.1）

在下面的示例中，导航栏将出现在1200px断点处

我在下面的sn-p中包含了代码或> jsFiddle

body .navbar-default  {
	height:auto!important;
}
.navbar-nav {
  width: 100%;
  >li {
    float: none;
    display: inline-block;
  }
}

.navbar {
  margin-top: 0px;
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
  font-family: 'Abel', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.navbar-toggle{
  border-color: #002d68 !important;
  background-color: #ffff01 !important;
}

.navbar-default .navbar-toggle:hover {
    background-color: #ffff01 !important;
}

.navbar-toggle .icon-bar{
  background-color: #002d68 !important;
}

.navbar-brand{
  color: #002d68 !important;
}

.navbar-default {
  background-color: #ffff01;
  height: 40px;
}

.navbar-default .navbar-nav>li>a {
  color: #002d68 !important;
}

.glavni-meni {
  background-color: #ffff01;
}



#main-content{
  background-image: url('../img/football-field.jpg');
  background-repeat:no-repeat;
}

@media (min-width: 768px) {
  .navbar-brand {
    display: none;
  }
  .navbar-centered .navbar-nav {
    float: none;
    text-align: center;
  }
  .navbar-centered .navbar-nav>li {
    float: none;
  }
  .navbar-centered .nav>li {
    display: inline;
  }
  .navbar-centered .nav>li>a {
    display: inline-block;
  }

  .container-fluid {
    padding-right: 80px;
    padding-left: 80px;
  }
}
@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-custom navbar-centered" role="navigation">
        <div class="container-fluid glavni-meni">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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 class="navbar-brand" href="index.html">MNZ Maribor</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><a href="">Tekmovanja</a></li>
              <li><a href="">Klubi</a></li>
              <li><a href="">Reprezentance</a></li>
              <li><a href="">Grassroots</a></li>
              <li><a href="">Klub Klubu</a></li>
              <li><a href="">Obrazci in predpisi</a></li>
              <li><a href="">Trenerji in sodniki</a></li>
              <li><a href="">Delegati</a></li>
              <li><a href="">Razno</a></li>
              <li><a href="">Ugodnosti</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>

      <!--Main content of page-->
      <section id="main-content">
        <div class="container nekaj">
          <div class="col-lg-2 col-md-2 navigation">
            content content content content content content content content content content content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-md-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="img/example.jpg" alt="Los Angeles">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="Chicago">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="New York">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>