Question

当您点击切换菜单时，它会按下我的div。我尝试了一些像position: absolute这样的作品，但它弄乱了我的菜单。使fixed解决我的菜单被按下的问题，但我不希望我的菜单在页面上被修复。

＆＃13;

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.logo {
height: 74px;
padding-left: 10px;
}

section {
background-image: url("tumblr_mngppzG5MX1r9wqk4o3_1280.png"); 
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

a  {
	text-decoration: none;
 color: red
}

.navbar {
    min-height: 100px;
   	border: none;
}
.navbar-nav {
    float: right;
    margin: 0;
    padding-top: 29px;
}

.navbar-default {
	background-color: rgba(0, 0, 0, 0.3);
	}

.navbar-default .navbar-nav>.active>a
	{
	background-color: transparent;
	color: #CBCCCE;
	}

.navbar-default .navbar-nav>.active>a:hover {
    color: white;
    background-color: transparent !important;
    font-size: 1.7em !important;
}

.navbar-default .navbar-nav>.active>a.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #286090;
    transition: width .3s;
}

.navbar-default .navbar-nav>.active>.cool-link:hover::after {
    color: white;
    width: 100%;
    transition: width .3s;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus  {
    background-color: transparent;
    color: white;
}

.navbar-default .navbar-nav>li>a {
    color: #CBCCCE;
    font-size: 1.6em;
}

.navbar-default .navbar-nav>li>a:hover {
    color: white;
    background-color: transparent !important;
    font-size: 1.7em !important;
    transition: width 1s;
}

.navbar-default .navbar-nav>li>a.cool-link::after {
	content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #286090;
    transition: width .3s;
}

.navbar-default .navbar-nav>li>a.cool-link:hover::after {
    color: white;
    width: 100%;
    transition: width .3s;
}


@media only screen and (max-width: 780px) {
    .logo {
        height: 50px;
    }

    .navbar {
    min-height: 80px;
   	border: none;
   	}
   	
   	.navbar-default .navbar-nav>li>a {
    font-size: 1em;
	}

	.navbar-default .navbar-nav>li>a:hover {  
    font-size: 1.1em !important;
	}	

	.navbar-default .navbar-nav>.active>a:hover {
    font-size: 1.1em !important;
	}

}

.navbar-collapse { 
box-shadow: none !important;
border:none !important;
}

.navbar-default .navbar-collapse {
border: none !important;
}

.jumbotron {
width: 50%;
margin: auto;
}

＆＃13;

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://www.festsolutions.com/wp-content/uploads/2016/05/stylesheet.css">
<head>
	<title></title>
</head>

<body>
<section>
	<nav class="navbar navbar-default">
  	<div class="container-fluid">
    <!-- 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="#bs-example-navbar-collapse-1" 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 class="logo" src="http://www.festsolutions.com/wp-content/uploads/2016/05/Untitled-2-300x97.png"></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" navbar-right>
        <li class="active"><a href="#" class="cool-link">Home<span class="sr-only">(current)</span></a></li>
        <li><a href="#" class="cool-link">Portafolio</a></li>
        <li><a href="#" class=cool-link>About</a></li>
        <li><a href="#" class=cool-link>Contact</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

</section>
</body>
</html>

＆＃13;

Answer 1

将position: fixed; width: 100%;添加到<nav>，它应解决您的问题

如何阻止我的引导三明治菜单推送我的内容？

1 个答案: