Question

我在导航部分放入一个菜单，其中包含经典的bootstrap响应菜单，小屏幕上有可切换的按钮。我的问题是，当我切换按钮以显示菜单时，id = contents的父div不会出现故障，但菜单会溢出div。我该如何解决？

这是代码

<body>

    <nav id="header" class="navbar navbar-default">
      <div class="container">
        <!-- 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="#navmenu" aria-expanded="false">
            <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="#"><img id="logo" src="images/art-of-hair.png"></a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="navmenu" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home<span class="sr-only">Home</span></a></li>
            <li><a href="#">Hair<br>Styles</a></li>
            <li class=""><a href="#" class="">About</a></li>
            <li class=""><a href="#" class="">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div id="contents">

        <div class="jumbotron">
              <h4>We bring out your beauty...</h4>
              <h6>Set an appointment</h6>
              <p><a class="btn btn-lg" href="tel:5671234009" role="button"><span class="glyphicon glyphicon-earphone"></span>567-1234-009</a></p>
        </div> <!-- End Jumbotron -->

        <div id="featured">

        </div> <!-- #featured -->

    </div> <!-- #contents -->

    <div id="footer">

    </div> <!-- #footer -->

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- <script src="js/main.js"></script> -->


</body>

这里是css：

/** {
margin: 0;
}*/

body {
    font-family: 'Alice', serif;
}

/****************** Nav Section ************************/

nav#header {
    background:url('../images/header.png') no-repeat;
    /*min-height:200px;*/
    color:#fff;
    margin-bottom:0;
}

#logo {
    width: 300px;
    height:150px;
}

#navmenu {
    margin:0px 120px 0 0;
    color: #fff;
}


ul.nav.navbar-nav.navbar-right li {
    background-color: #301b14;
    height:180px;
    font-weight: bold;
    text-transform: uppercase;
    margin:10px;
    border-radius: 5px;
    text-align: center;
}
ul.nav.navbar-nav.navbar-right li a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    top: 35%;
    left: 0;
    padding-top: 5px;

}

ul.nav.navbar-nav.navbar-right li.active {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;

}

ul.nav.navbar-nav.navbar-right li.active a{
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;

}

ul.nav.navbar-nav.navbar-right li:hover {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;
}

ul.nav.navbar-nav.navbar-right li a:hover {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;
}


/****************** End Nav Section ************************/


/****************** Content Section ************************/


.jumbotron {
    letter-spacing: 2px;
    background: url('../images/jumbo-1000.jpeg') no-repeat center;
    height:559px;
    margin:0;
    border-top: 10px solid rgba(48,27,20,0.9);
    border-bottom: 10px solid rgba(48,27,20,0.9);
}


.jumbotron h6, .jumbotron h4 {
    text-align: right;
    color:#fff;
    font-size: 200%;
    margin-right: 20px;
    margin-top: 60px;
}

.jumbotron p {
    text-align: right;

    font-size: 300%;
    margin-right: 20px;
    margin-top: 0px;
}

div.jumbotron p a.btn.btn-lg{
    background-color: #E4DFC1;
    color:#301B14;
    border:2px solid #301B14;
    font-weight: bold;
    -webkit-transition: font-size 1s; /* For Safari 3.1 to 6.0 */
    transition: font-size 1s;
}

div.jumbotron p a.btn.btn-lg:hover{
    font-size: 0.8em;
}

.jumbotron p a span{

    margin: 6px;

}




/****************** End Content Section ************************/



/****************** Footer Section ************************/



/****************** End Footer Section ************************/


/********** Large devices only **********/
@media (min-width: 1200px) {

}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  /* Header */

  /* End Header */

  /* Home Page */

  /* End Home Page */
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  /* Home Page */
  #navmenu {
    margin:30px 0px 0 0;
    color: #fff;
}

.jumbotron {
    background: url('../images/jumbo-900.jpeg') no-repeat center;
    height:416px;
    margin:0;
}

}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  /* Header */
  #navmenu {
        margin:150px 0 0 0;
        color: #fff;
        background-color: #886744;
    }

    ul.nav.navbar-nav.navbar-right li a {
        color: #fff;
        font-weight: bold;
        text-transform: uppercase;
    }

    ul.nav.navbar-nav.navbar-right li {
        background-color: #301b14;
        font-weight: bold;
        text-transform: uppercase;
        margin:1px;
        border-radius: 0 5px 5px 5px;
        height: auto;
    }
  /* End Header */

  /* Contents */

  /*#contents {
    margin-top:180px;
  }*/

  .jumbotron {
    background: url('../images/jumbo-770.jpeg') no-repeat center;
    height:297px;
    margin:0;
}

  /* End Contents */

  /* Footer */

  /* End Footer */

  /* Home Page */

}


/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
  /* Header */
    #logo {
        width: 150px;
        height:90px;
    }

    nav#header {

    height:120px;

    }

    #navmenu {
        margin:68px 0 0 0;
        color: #fff;
        background-color: #886744;
    }


    ul.nav.navbar-nav.navbar-right li {
        background-color: #301b14;
        font-weight: bold;
        text-transform: uppercase;
        margin:1px;
        border-radius: 0 5px 5px 5px;

    }

  /* End Header */

  /* Home page */

/*#contents {
    margin-top:180px;
  }*/

.jumbotron {
    background: url('../images/jumbo-480.jpeg') no-repeat center;
    height:185px;
    margin:0;
}
}

Answer 1

因为您已定义：

#header {
  height: 200px;
}

而不是那样，如果您希望#header部分的高度至少为200px，那么您可以这样做：

#header {
  min-height: 200px;
}

代码段

＆＃13;

* {
  margin: 0;
}
body {
  font-family: 'Alice', serif;
}
#header {
  min-height: 200px;
}
#logo {
  width: 300px;
  height: 150px;
}
#navmenu {
  margin: 30px 120px 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="header" class="navbar navbar-default">
  <div class="container">
    <!-- 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="#navmenu" aria-expanded="false" aria-controls="navmenu">
        <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="#">
        <img id="logo" src="images/art-of-hair.png">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="navmenu" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home<span class="sr-only">Home</span></a>
        </li>
        <li><a href="#">Hair Styles</a>
        </li>
        <li class=""><a href="#" class="">About</a>
        </li>
        <li class=""><a href="#" class="">Contact</a>
        </li>
      </ul>


    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

＆＃13;

Bootstrap Nav菜单不会在切换时下拉父div

1 个答案:

代码段