我正在一个项目上,在执行标题时,我无法找到下拉菜单中未显示跨度图标栏的原因:

这是用于代码的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/

10-09 04:10