Bootstrap 图标栏跨度不可见 [英] Bootstrap icon-bar span not visible

查看：24
本文介绍了Bootstrap 图标栏跨度不可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是您必须在行中查找第三个 div 的代码的 html，该 div 是其中包含两个按钮的 div:

<html lang="zh-cn"><头><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><身体><div class="容器"><nav class="navbar navbar-default"><div class="容器"><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><spanclass="big">H</span>OUSE</a>

<div class="nav-container col-lg-4"><ul class="nav nav-justified"><li>什么</li><li>工作</li><li>关于</li>

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

</nav>

</html>

这里是css

正文{保证金:0;填充:0;}.navbar-默认{边界半径:0；背景颜色:白色；}.wb{字体粗细:粗体；}.大{字体大小:25px；}.navbar-header .navbar-brand{字体大小:17px；}.icon-bar{背景颜色:红色；红色;}.nav 对齐{行高:52px；}

解决方案

您可以只为切换图标栏添加 bootstrap 按钮类，如下所示:

查看更新演示

<button type="button" class="navbar-toggle" data-toggle="collapse" data-目标=你的班级"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

CSS:

.btn-group-sm>.btn, .btn-sm {浮动:无；}.navbar-toggle {显示:内联块；浮动:无；}

I am working on a project and while doing the header I cannot find a reason why the span icon-bar in a button for dropdown is not showing have a look:

Here is the html for the code you have to look for the third div in the row which is the div with two buttons inside it:

<!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>

Here is the 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;
}

解决方案

You can add only bootstrap button class for toggle icon bar same as below:

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

这篇关于Bootstrap 图标栏跨度不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆