Question

我正在尝试自定义Bootstrap，但我遇到了一个问题。在较小的屏幕上，菜单与navbar-header重叠。下面附着的是重叠发生的图像（绿色和蓝色框与灰色＃navbar-min重叠）。 bootstrap image

代码如下：

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;
    }
}

Answer 1

<!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 {
	padding-top: 10px !important;
}
.navbar-brand {
	padding: 9px 15px !important;
}
.navbar {
	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>

Bootstrap菜单重叠navbar-header用于较小的屏幕

1 个答案: