下拉菜单会将导航栏向下推。怎么避免呢？

时间：2016-06-21 11:47:23

标签： css3 twitter-bootstrap-3 navbar

我是bootstrap和web开发的新手。

我想构建一个有两个导航栏的网页，根据屏幕尺寸，只会显示一个导航栏。对于屏幕尺寸> 768px，一切正常（至少看起来如此）。 对于较低分辨率，下拉菜单会将导航栏向下推到内容上。

如何避免这种情况？任何形式的帮助将不胜感激。提前谢谢。

点击此链接获取jsfiddle https://jsfiddle.net/pavan39/rk6m3ho8/2/ 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#header
{
  position: relative;
  z-index: 1010;
}
/* nav styling*/
.navbar-default{

  border-bottom: 0.5px solid rgb(180,180,180);
}
.navbar-brand{
  font-family:Comic Sans MS;
  color:rgb(0,50,150);
  font-size:150%;
  font-weight:italic;
}
/*end*/

/*desktop bar related*/
@media(max-width:767px)
{
  .desktop-bar{
    /*margin: 10px 10px 10px 10px;*/
    display:none;}

}
.mob-nav{
  margin: 0px;
  padding: 0px;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-wrap: nowrap; 
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}
.mob-home{
  -webkit-order: 1; /* Safari */
  order: 1;
  -webkit-flex-grow: 1; /* Safari */
  flex-grow: 1;
  margin-left:-1em;
}
.mob-search{
  /*width:50%;
  margin-top:0.2em;*/
  margin-top:0.5em;
  -webkit-order: 2; /* Safari */
  order: 2;
  -webkit-flex-grow: 2; /* Safari */
  flex-grow: 2;
  min-width:6em;
  size:50%
}
.mob-notify{
  -webkit-order: 3; /* Safari */
  order: 3;
  -webkit-flex-grow: 1; /* Safari */
  flex-grow: 1;
  min-width:5em;
}
.mob-more{
  /*width:7em;*/
  -webkit-order: 4; /* Safari */
  order:4;
  -webkit-flex-grow: 2; /* Safari */
  flex-grow: 2;
  min-width:7em;
}

@media(min-width:768px)
{
  .mobile-bar{
    /*margin: 10px 10px 10px 10px;*/
    display:none;}	
}
/*end*/

.wrapper{
  padding-top:50px;
}
.badge-danger {
  background-color: #d43f3a;

}

.badge-mob-notify{
  margin-left:-0.5em;
  margin-top:-0.5em;
}
<div id="header">
  <div class = "desktop-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class = "navbar-header">
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <ul class="nav navbar-nav navbar-left" role="navigation">
          <li role="presentation" class="dropdown">
            <a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-plus fa-lg "></i>&nbsp; <span >Add</span><span class=" caret"></span>
            </a>
            <ul class= "dropdown-menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">4</a></li>
            </ul>
          </li>
          <li role="presentation">
            <form class= "desktop-search navbar-form navbar-left"  role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
              </div>
            </form>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right" role="navigation">
          <li role="presentation"><a  href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li>
          <li role="presentation"><a  href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
          <li role="presentation" class= " dropdown">
            <a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup></span><span class="caret"></span>
            </a>
            <ul class= "dropdown-menu">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  
  <div class = "mobile-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <ul class="mob-nav nav navbar-nav" role="navigation">
          <li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i>&nbsp;</a></li>        
          <li role="presentation" class="mob-search">
            <form class=  "mob-search-bar navbar-search" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder= "" name="srch-term" id="srch-term">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
              </div>
            </form>
          </li>
          <li role="presentation" class="mob-notify"><a  href="#"><i class=" fa fa-bell fa"></i>&nbsp;<sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li>
          <li role="presentation" class="mob-more">
            <a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></span><span class="caret"></span>
            </a>
            <ul class= "dropdown-menu" style="z-index:99999;">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li>
              <li><a href="#">Favorites</a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<div class="wrapper">
  <div class ="nav">
    nav
  </div>
  <div class="article">
    artcle
  </div>
  <div class="aside">
    aside
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

1 个答案:

答案 0 :(得分：2)

CSS for Bootstrap下拉菜单，在窄屏幕上没有折叠

Bootstrap基于以下假设：当屏幕宽度为767px或更小时，所有菜单项都会折叠。这就是下拉菜单改变其行为的原因。现在它打开就像普通折叠菜单的一部分。

所以你必须重新定义.navbar-nav .open .dropdown-menu类的样式。我正在使用这个变种：

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

请检查结果：https://jsfiddle.net/glebkema/c7thd7gh/ 

$(document).ready(function() {
  $('.dropdown-toggle').dropdown();
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#header {
  position: relative;
  z-index: 1010;
}

/* nav styling*/
.navbar-default {
  border-bottom: 0.5px solid rgb(180, 180, 180);
}
.navbar-brand {
  font-family: Comic Sans MS;
  color: rgb(0, 50, 150);
  font-size: 150%;
  font-weight: italic;
}

/*desktop bar related*/
@media (max-width:767px) {
  .desktop-bar {
    /*margin: 10px 10px 10px 10px;*/
    display: none;
  }
}
.mob-nav {
  margin: 0px;
  padding: 0px;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
          flex-flow: row;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
.mob-home {
  -webkit-order: 1;
          order: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  margin-left: -1em;
}
.mob-search {
  /*width:50%;
	margin-top:0.2em;*/
  margin-top: 0.5em;
  -webkit-order: 2;
          order: 2;
  -webkit-flex-grow: 2;
          flex-grow: 2;
  min-width: 6em;
  size: 50%
}
.mob-notify {
  -webkit-order: 3;
          order: 3;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  min-width: 5em;
}
.mob-more {
  /*width:7em;*/
  -webkit-order: 4;
          order: 4;
  -webkit-flex-grow: 2;
          flex-grow: 2;
  min-width: 7em;
}
@media(min-width:768px) {
  .mobile-bar {
    /*margin: 10px 10px 10px 10px;*/
    display: none;
  }
}
.wrapper {
  padding-top: 50px;
}
.badge-danger {
  background-color: #d43f3a;
}
.badge-mob-notify {
  margin-left: -0.5em;
  margin-top: -0.5em;
}

/* dropdown menu */
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
<div id="header">
  <div class="desktop-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <ul class="nav navbar-nav navbar-left" role="navigation">
          <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-plus fa-lg "></i>&nbsp; <span>Add</span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">4</a></li>
            </ul>
          </li>
          <li role="presentation">
            <form class="desktop-search navbar-form navbar-left" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
                <span class="input-group-btn">
										<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
									</span>
              </div>
            </form>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right" role="navigation">
          <li role="presentation"><a href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li>
          <li role="presentation"><a href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
          <li role="presentation" class=" dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup>
              </span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="mobile-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <ul class="mob-nav nav navbar-nav" role="navigation">
          <li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i>&nbsp;</a></li>
          <li role="presentation" class="mob-search">
            <form class="mob-search-bar navbar-search" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="" name="srch-term" id="srch-term">
                <span class="input-group-btn">
									<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
								</span>
              </div>
            </form>
          </li>
          <li role="presentation" class="mob-notify"><a href="#"><i class=" fa fa-bell fa"></i>&nbsp;<sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li>
          <li role="presentation" class="mob-more dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup>
              </span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu" style="z-index:99999;">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li>
              <li><a href="#">Favorites</a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<div class="wrapper">
  <div class="nav">
    nav
  </div>
  <div class="article">
    artcle
  </div>
  <div class="aside">
    aside
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

相关问题
最新问题