Question

我正在使用bootsrap 4 alpha 6和midnight.js来更改导航菜单切换器的颜色。我想在它旁边插入一个文本（MENU）。捕获中的示例。对于文本切换器，我使用fontawesome。

感谢您的时间和帮助！

源html

<div class="navigation-button">
    <button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa fa-bars fa-2x"></span>
    </button>
</div>

使用midnight.js，将会是这样的

<div class="navigation-button">
        <button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
            <span class="fa fa-bars fa-2x"></span>
        </div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
            <span class="fa fa-bars fa-2x"></span>
        </div></div></button>
    </div>

它运作正常，只是我想为它添加一个文本。现在看起来像是：

我想要

我试过

MENU<span class="fa fa-bars fa-2x"></span>

看起来

Answer 1

尝试添加display：inline;到你的图标：

<span class="fa fa-bars fa-2x" style="display:inline;"></span>

Answer 2

尝试这样做

MENU<span class="fa fa-bars fa-2x" style="display:inline;"></span>

这将使图标成为内联元素（与文本相同）

还要检查某些内容是否限制了元素的宽度，同时也检查父元素。这可能会阻止下一个显示内嵌图标。

Answer 3

我已经操作了一些我前一段时间回答的代码。用我的手机测试，它的工作原理。它在Bootstrap上。我正在回答这个问题并喝点酒。所以，我会在发布这个答案后立即关闭我的电脑。希望就是你想要的。

 <!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

</script>

<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav {
font-size: 15px;
}

.navbar-fixed-top {
min-height: 80px;
}

.navbar-nav>li {
position: relative;
}

.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}

.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}

@media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}

@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>

</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header"> 

            <div class="row">
                <div class="col-sm-10 visible-sm visible-md visible-lg">
                    <a class="navbar-brand" href="">
                        <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
                    </a>
                </div>

                <div class="col-xs-7 visible-xs">
                     <a class="navbar-brand" href="">
                         <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
                     </a>                   
                </div>              

                <div style="margin-top:15px;text-align:right;" class="col-xs-3 visible-xs">
                <strong>Menu</strong>
                </div>

                <div class="col-xs-2">
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                 </div>

        </div>          

        </div>      

        <div class="collapse navbar-collapse navbar-right" id="collapse">
            <ul class="nav navbar-nav">

                <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
                    <div class="nav-line"></div>
                </li>
                <li class="dropdown" id="nav-about">
                    <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">The Founder</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HSE Policy</a></li>
                        <li><a href="#">Quality Policy</a></li>
                    </ul>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#services">Services</a>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#projects">Our Projects</a>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#whyus">Why Us</a>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#contact">Contact</a>
                    <div class="nav-line"></div>
                </li>
            </ul>
        </div>
    </div>
</nav>

</body>
</html>

在导航栏

3 个答案: