在导航栏附近插入文本（菜单）答案

【问题标题】：insert text (menu) near navigation bar在导航栏附近插入文本（菜单）
【发布时间】：2018-01-16 02:53:49
【问题描述】：

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

感谢您的时间和帮助！

源代码

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

看起来

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
你试过把它设置为Menu <span class="fa fa-bars fa-2x"></span>
@y0hami 是的，我试过了，我更新我的问题看看它的样子

标签： javascript twitter-bootstrap css bootstrap-4

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试这样做

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

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

还要检查是否有东西限制了元素的宽度，也要检查父元素。这可能会阻止下一个与图标内联显示。

【讨论】：

用 flexbox 我实现了我想要的，谢谢你的建议 :) 有问题

【解决方案3】：

我已经操作了一些我前段时间在这里回答过的代码。用我的手机测试，它可以工作。它在引导程序上。我正在回答这个问题并喝一些酒。所以，我会在发布这个答案后不久关闭我的电脑。希望就是你想要的。

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

【讨论】：

谢谢，我会试试的:)
我喜欢你的非移动菜单，但我必须为移动菜单创建一个画布菜单
很好，您已经如上所述解决了它。如果您测试该代码，它是移动兼容的。放这里之前我在网上测试过
我决定使用这个代码，因为您提供的代码不完整