我正在一个项目上,在执行标题时,我无法找到下拉菜单中未显示跨度图标栏的原因:
这是用于代码的html,您必须在该行中查找第三个div,即其中有两个按钮的div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="UTF-8">
<title>SoftHouse</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<a href="#" class="navbar-brand"><span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE</a>
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<button>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
这是CSS
body
{
margin:0;
padding:0;
}
.navbar-default{
border-radius: 0;
background-color: white;
}
.wb
{
font-weight:bold;
}
.big
{
font-size: 25px;
}
.navbar-header .navbar-brand
{
font-size: 17px;
}
.icon-bar
{
background-color: red;
color:red;
}
.nav-justified
{
line-height: 52px;
}
最佳答案
您只能为切换图标栏添加引导按钮类,如下所示:
见Updated demo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="Your class">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
CSS:
.btn-group-sm>.btn, .btn-sm {
float: none;
}
.navbar-toggle {
display: inline-block;
float: none;
}
关于html - Bootstrap图标栏范围不可见,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45115371/