我有一个如下菜单,但我有一些问题。例如,在全尺寸屏幕中,菜单选项不在它所在部分的中上方。另一个问题是,当屏幕是手机大小并且汉堡图标可见时,我不知道如何删除黑条。
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class=" col-md-12 col-sm-12 col-xs-12 search-container">
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
</div>
</div>
</div>
<nav class="navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
</body>
</html>
不确定中间部分,但其他部分应该可以工作。
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a{
padding: 10px !important;
}
.navbar-header {
background-color: white; //or inherit whatever you like
}
.navbar-toggle.collapsed {
background-color: black;
}
Niklas Brunberg 完成的演示
对于中间对齐菜单,使用类似的css
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a{
padding: 10px !important;
}
.navbar-inverse {
position: absolute;
top:50%;
width:100%;
left: 0
}
如果您想删除背景色,请使用css
@media only screen and (max-width : 480px) {
.navbar-inverse{
background: transparent;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{
background: transparent;
}
.navbar-inverse .navbar-toggle{
border: 0px none;
}
.navbar-inverse .navbar-toggle .icon-bar {
background: #666;
}
}
此媒体查询仅适用于移动屏幕
希望这将帮助您
当显示在桌面上时,我将菜单项居中,然后当最小化到手机大小时,背景栏变为白色,然后汉堡图标将变为黑色
链接到plunker
演示
我已经用bootstrap做了很多工作,所以我建议你用自己的类扩展它们的原始风格,而不是覆盖所有东西。我的建议基于flexbox,并使用自定义类作为一种使事情按需工作的方式。
看看吧,希望能有所帮助。(:
JSFiddle链接:https://jsfiddle.net/ce7L0nez/
CSS:
.center-md-content {
display: flex!important;
align-items: center;
justify-content: center;
}
.center-md-content .navbar-nav {
float: none;
}
@media only screen and (max-width : 768px) {
.sm-no-background {
background-color: transparent;
}
.sm-no-background .navbar-header {
margin-left: auto;
}
.sm-no-background .navbar-toggle .icon-bar {
background-color: #333;
}
.sm-no-background .navbar-toggle {
border: 0;
}
.sm-no-background .navbar-toggle:hover .icon-bar {
background-color: #FFF;
}
}
HTML:
<header>
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class=" col-md-12 col-sm-12 col-xs-12 search-container">
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
<p>THIS IS A TEST</p>
</div>
</div>
</div>
<nav class="navbar-inverse navbar-static-top sm-no-background" role="navigation">
<div class="container center-md-content">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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">
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>