引导图标栏跨度不可见答案

【问题标题】：Bootstrap icon-bar span not visible引导图标栏跨度不可见
【发布时间】：2017-07-15 06:51:09
【问题描述】：

我正在做一个项目，在做标题时我找不到下拉按钮中的跨度图标栏没有显示的原因看看：

这是代码的 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;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您只能为切换图标栏添加引导按钮类，如下所示：

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

【讨论】：

这样按钮就完全消失了
您可以只添加我在更新答案和更新演示中添加的 css。请你检查一下。

【解决方案2】：

你说：我想一直显示图标栏，所以可以使用after，不需要启动图标：

CSS：

.btn-sm + span:after {
    content: '\2261';
    margin-left: 10px;
    font-size: 15px;
}

HTML：

<div class="col-lg-4" style="text-align: center;">
   <button class="btn btn-sm">CONTACT</button>
   <span><span><--------------Added
   <span class="icon-bar"></span><---------------Remove
   <span class="icon-bar"></span><---------------Remove
   <span class="icon-bar"></span><---------------Remove
</div>

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

.btn-sm + span {
    border:1px solid #ccc;
    text-align:center;
    padding:5px 10px;
    cursor:pointer;
}

.btn-sm + span:hover {
 background-color:#ccc;
}

.btn-sm + span:after {
    content: '\2261';
    font-size: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
                <span></span>
            </div>



        </div>

    </div>

    </nav>

</div>

【讨论】：

这不起作用，完成按钮消失
@WaqasShahbaz ，您必须调整浏览器大小。

【解决方案3】：

使用很棒的字体来做到这一点

html代码：-

        <!DOCTYPE html>
        <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>SoftHouse</title>

         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" type="text/css" href="css/style.css">

        </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>
                            <a class="icon-bar" href="#"><i class="fa fa-caret-down"></i></a>
                        </div>
                   </div>

               </div>

            </nav>

        </div>

        </body>
        </html>

在css中：-

.icon-bar { color: red; }

【讨论】：