在導航欄附近插入文本（菜單）

我使用bootsrap 4 alpha 6和midnight.js來更改導航菜單的切換器的顏色。我想在它旁邊插入一個文本（菜單）。捕獲示例。對於文本轉換器，我使用fontawesome。在導航欄附近插入文本（菜單）

感謝您的時間和幫助！

使用midnight.js 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>

，會看起來像這樣

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

它看起來

來源

2017-08-08 almost okey

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

您是否試過將其設置爲'Menu ' – y0hami

@ y0hami是的我試過了，我更新我的問題，看看它如何看起來 –

嘗試通過增加顯示：我n線;到你的圖標：

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

來源

2017-08-08 13:57:28 kastriotcunaku

嘗試這樣做

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

這將使圖標內聯元素（同文）

還要檢查，看看是否有被限制的寬度元素，也檢查父元素。這可能會阻止下一個內聯圖標顯示。

來源

2017-08-08 13:59:04 y0hami

與flexbox我實現了我想要的，謝謝你的消減:)有一個問題 –

我已經操縱了一些代碼，這是我在前段時間回答的。用我的手機測試，它的工作原理。它在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>

來源

2017-08-08 14:27:52

thanx我會試試:) –

我喜歡你的非移動菜單，但我必須爲移動菜單創建一個offcanvas菜單 –

好，你已經解決了上述問題。如果您測試該代碼，它是移動兼容的。我在網上測試之前 –

在導航欄附近插入文本（菜單）

回答

相關問題