Bootstrap菜单重叠导航栏标题小屏幕

我想自定义Bootstrap，但我面临的问题。在较小的屏幕上，菜单重叠导航栏标题。下面附加了重叠发生的图像（绿色和蓝色框与灰色＃navbar-min重叠）。 bootstrap image Bootstrap菜单重叠导航栏标题小屏幕

的代码如下：

1.HTML

<header role="banner"> 
    <div class="row"> 
    <div class="col-sm-6 col-md-offset-4 col-md-4"> 
     <a id="logo" href="#"> <img src="../static/images/logo_small.png" data-medium="../static/images/logo_medium.png" data-large="../static/images/logo_large.png"></a> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div>  
<nav class="navbar navbar-md" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-min"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button>  
    </div> 
    <div class="collapse navbar-collapse" id="navbar-min"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
</header>

2.custom_bootstrap.css

/* Create a medium height at 40px */ 
.navbar-md {min-height:40px; background: url(../images/bannerBG.png) 0 0 repeat-x;border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;} 
.navbar-md .navbar-nav>li>a { color:#fff;} 
.navbar-md .navbar-toggle 
{ 
    position:relative; 
    float:right; 
    padding:9px 10px; 
    margin-top:8px; 
    margin-right:15px; 
    margin-bottom:8px; 
    background-color:#fff; 
    background-image:none; 
    border:1px solid #444;   
    border-radius:4px; 
} 

.navbar-md .navbar-toggle .icon-bar 
{ 
    display:block; 
    width:22px; 
    height:2px; 
    border-radius:1px; 
    border:1px solid #444; 
} 

.navbar-nav>li>a 
{ 
    color:#fff; 
    padding:20px; 
    outline: 0; 
} 

.navbar-nav>li>a:active, 
.navbar-nav>li>a:focus 
{ 
    /*color:#C41E39; */ 
    background: none; 
} 

.navbar-nav>li>a:hover 
{ 
    color:#C41E39; 
    background: none; 
} 

body:after { 
    content: 'global'; 
    display: none; 
} 

@media screen and (min-width: 35em) { 
    body:after { 
    content: 'tablet'; 
    display:none; 
    } 
} 

@media screen and (min-width: 56em) { 
    body:after { 
    content: 'desktop'; 
    display:none; 
    } 
} 

header[role="banner"] #logo { 
    display: block; 
    margin: 10px; 
    text-align: center; 
    outline: 0; 
} 

header[role="banner"] .row { 
    background: url(../images/topBG.png) 0 0 repeat; 
} 

@media screen and (max-width: 768px){ 

    #navbar-min { 
     margin-left: -15px; 
     margin-right: -15px; 
     background-color: #EEE; 
     color:black; 

    } 


    .navbar-nav>li>a { 
     padding: 5px; 
     margin-right: 20px; 
    } 
}

来源

2015-02-24 zan

您想如何在手机上显示菜单？ – 2015-02-24 03:50:47

您没有使用col-xs- *类。请在使用col-xs- *类后尝试。 – 2015-02-24 06:06:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
 
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
<style> 
 
.nav { 
 
\t padding-top: 10px !important; 
 
} 
 
.navbar-brand { 
 
\t padding: 9px 15px !important; 
 
} 
 
.navbar { 
 
\t min-height: 70px !important; 
 
} 
 
@media (max-width:768px) { 
 
.navbar-brand { 
 
height: 70px !important; 
 
} 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<header role="banner"> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" 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> 
 
     <a class="navbar-brand" href="#"><img src="hotel.com.jpg" width="200" height="50" /></a> </div> 
 
     <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true" style=""> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href=""><span class="glyphicon glyphicon-user">Sign Up</a></li> 
 
      <li><a href=""><span class="glyphicon glyphicon-user">Login</a></li> 
 
     </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
    </nav> 
 
</header> 
 
</body> 
 
</html>

来源

2015-02-24 06:50:30 RAJ

Bootstrap菜单重叠导航栏标题小屏幕

回答

相关问题