Question

我正在使用引导程序导航栏切换按钮，当我点击它时，内容会被下一个div隐藏，我试图修复它但我无法看到错误

你会看到我有两个div.row。第二个div.row隐藏div id =＆＃34; navbar1＆＃34;内容，即导航栏切换按钮的目标。

<div class="container-fluid">

  <div class="row">                                            
    <nav class="navbar navbar-default" style="height:75px;">
      <div class="container-fluid">
        <div class="navbar-header">                             
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand"><img src="zzlogo.png"></a>
        </div>
        <div class="collapse navbar-collapse" id="navbar1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Desarrolladores</a></li>
                <li><a href="#">Trayectoria</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Abarrotes</a></li>
                <li><a href="#">Frutas y Verduras</a></li>
                <li><a href="#">Carnes</a></li>
                <li><a href="#">Lácteos</a></li>
              </ul>
            </li>
            <li><a href="#">Contacto</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>


<!-- THIS DIV IS NOT MOVING WHEN I CLICK ON THE NAVBAR-TOGGLE BUTTON -->

  <div class="row">
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header col-xs-5 col-sm-4 col-md-3 col-lg-3">
          <a href="#" class="navbar-brand">Administración</a>
        </div>
        <div class="col-xs-7 col-sm-8 col-md-9 col-lg-9">
          <ul class="nav navbar-nav">
            <li ><a href="#">Usuarios</a></li>
            <li ><a href="#">Productos</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

抱歉我的英文不好，谢谢。

Answer 1

问题是由navbar（高度：75px）声明高度引起的。它的默认值是min-height：50px所以一旦视口低于768px，导航栏无法展开，如果你愿意，可以将背景渲染为“隐形”。

您可以使用padding来增加身高。

参见工作实例。

示例1

.navbar.navbar-top {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
  border-radius: 0;
}
.navbar.navbar-bottom {
  border-radius: 0;
}
.navbar-top .navbar-brand {
  padding-top: 0;
  margin-top: -12px;
}
@media (max-width: 767px) {
  .navbar-top .navbar-collapse {
    margin-top: 20px;
    margin-bottom: -20px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a href="#" class="navbar-brand">
        <img src="http://placehold.it/150x75/f00">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="navbar1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Desarrolladores</a>

            </li>
            <li><a href="#">Trayectoria</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Abarrotes</a>

            </li>
            <li><a href="#">Frutas y Verduras</a>

            </li>
            <li><a href="#">Carnes</a>

            </li>
            <li><a href="#">Lácteos</a>

            </li>
          </ul>
        </li>
        <li><a href="#">Contacto</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="#" class="navbar-brand">Administración</a>

    </div>
    <div class="collapse navbar-collapse" id="navbar2">
      <ul class="nav navbar-nav">
        <li><a href="#">Usuarios</a>

        </li>
        <li><a href="#">Productos</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

示例2

.navbar.navbar-top {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
  border-radius: 0;
}
.navbar.navbar-bottom {
  border-radius: 0;
}
.navbar.navbar-bottom a {
  margin: 0 5px;
}
.navbar-top .navbar-brand {
  padding-top: 0;
  margin-top: -12px;
}
@media (max-width: 767px) {
  .navbar-top .navbar-collapse {
    margin-top: 20px;
    margin-bottom: -20px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a href="#" class="navbar-brand">
        <img src="http://placehold.it/150x75/f00">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="navbar1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Desarrolladores</a>

            </li>
            <li><a href="#">Trayectoria</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Abarrotes</a>

            </li>
            <li><a href="#">Frutas y Verduras</a>

            </li>
            <li><a href="#">Carnes</a>

            </li>
            <li><a href="#">Lácteos</a>

            </li>
          </ul>
        </li>
        <li><a href="#">Contacto</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
  <div class="container">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Administración</a>

      <p class="navbar-text"> <a href="#" class="navbar-link">Usuarios</a>  <a href="#" class="navbar-link">Productos</a>

      </p>
    </div>
  </div>
</nav>

navbar-toggle引导内容被另一个div隐藏

1 个答案: