Question

我正在使用Bootstrap作为前端的网站。

我注意到当我在移动级点击汉堡菜单时，主体内容没有按下，所以菜单重叠： - （

如何解决此问题？

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 0px;
}

img {
  max-width:100%
}
h1, .navbar-collapse ul li a, p, .nav-tabs > li > h2 > a, h2, h3, h4 {
  font-weight: 300!important
}

h3 {
  border-bottom:1px solid white;
  margin-top:10px;
  margin-bottom:0px;
  padding-bottom:10px
}

h3 a, h3 a:hover {
  color:white;
  cursor:pointer;
}

h4 {
  margin-bottom:0;
}

h5 {
  font-size:16px;
  font-weight:bold;
  color:#fff;
  margin-bottom:15px;
}

.item div div {    
  border-bottom: 1px solid grey;
  padding-bottom: 5px;
}

/* Custom, iPhone Retina */
.cbp-af-header {
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.4s ease;
}
.cbp-af-header img{
  transition: all 0.4s ease;
}

.cbp-af-inner {
  transition: all 0.4s ease;
}

.cbp-af-header{
  -webkit-animation-name:fadeInDown;
  -webkit-animation-direction:normal;
  -webkit-animation-play-state:running;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:anim_titles;
  -moz-animation-direction:normal;
  -moz-animation-play-state:running;
  -moz-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  -moz-animation-iteration-count:1;
  -webkit-animation-duration:.5s;
  -moz-animation-duration:.5s;
  -webkit-animation-delay:0s;
  -moz-animation-delay:0s;
  -webkit-animation-timing-function:ease-out;
  -moz-animation-timing-function:ease-out;
}

/*body.body-class .container.body-text {
margin-top: 140px;
}*/

.cbp-af-header .cbp-af-inner img {
  margin: 20px 0;
}

.cbp-af-header.cbp-af-header-shrink .cbp-af-inner img {
  margin: 10px 0;
}
.cbp-af-header.cbp-af-header-shrink {
  height: 160px;
}

.cbp-af-header {
  height: 355px;
}

.cbp-af-header.cbp-af-header-shrink img {
  margin-top: 10px;
  transition: all 0.5s ease 0s;
  width: 42%;
  height:unset;
}

button {
  background:black!important;
  z-index:99999999;
  position:relative;
}

.container.body-text {
  margin-top: 140px; 
}

.nav {
  background:blue
}

<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>

<div class="container">
  <nav class="navbar">
    <div class="row">
      <div class="col-md-12">
        <div>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="center-block text-center" style="text-align:center">
            <div class="cbp-af-header">
              <div class="cbp-af-inner">
                <img src="http://placehold.it/600x200" alt="logo">
                <div id="navbar" class="collapse navbar-collapse">
                  <ul class="nav navbar-nav">                                                                                                  <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a>
                    </li>
                    <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a></li>
                    <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a></li>
                    <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/test/">Test</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>
<div class="container body-text">
  <div class="page">
    <div class="text-center">
      <h1 style="line-height:28px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus dolor et velit sodales, a pretium metus finibus. Vivamus lacinia a ligula vitae volutpat. Curabitur nulla lectus, aliquam ac massa at, lacinia mattis odio. Vivamus vitae orci urna. In iaculis sem a eleifend sollicitudin. Curabitur varius, felis vel efficitur condimentum, sapien est condimentum nibh, convallis faucibus sem tortor a purus. Aenean consequat nec diam quis aliquam. Aenean laoreet felis ac tincidunt iaculis. Quisque eu ipsum eget tortor sodales vehicula. Mauris sem lacus, tincidunt id sem id, posuere mollis velit. Nam enim magna, vulputate id eleifend eu, consectetur vel leo.</p>
    </div>
  </div>
</div>

Answer 1

您的标头必须是fixed位置，因此它不会将内容推迟。从你的CSS，

.cbp-af-header {
        position: fixed;
        top: 0;
        left: 0;
          transition: all 0.4s ease;
    }
    .cbp-af-header img{
      transition: all 0.4s ease;
    }

删除可能适合您的fixed位置。

Answer 2

只需使用margin-top并将某些内容推送到正确的位置即可。如果你在移动设备上进行测试，它就不会破坏移动兼容性。如果它仍然没有下降添加！important。

Bootstrap菜单没有按下正文

2 个答案: