内容后面的Bootstrap导航栏

Question

我正在使用bootstrap创建一个网页，我遇到了导航栏和页面内容重叠的以下问题。通常在查看页面时一切正常但在移动设备和平板电脑上显示时会出现问题。

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

这是我的代码：

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（查看bootstrap 3.1）

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

我在下面的代码段中包含了代码，或者＆gt; 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>