漢堡菜單問題和標誌問題

Question

我有一些小的引導問題，我似乎無法解決。

1. 我希望徽標和出現在其右側的文字只出現在左側而不是中間。 （我已經嘗試過左後並沒有運氣）

2. 我想漢堡菜單出現在最右側，當我添加可見sm代碼塊和可見lg塊的導航欄切換它出現在中心。我添加它，因爲它不顯示在手機屏幕上？我只需要它在平板電腦和小型設備上顯示。我試圖拉右

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 

 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
       <img alt="Logo" class="brnd" src="" height="30" /><span class="brnd2">| Specialty FORCES </span> 
 
        <button type="button" class="navbar-toggle visible-sm-block visible-xs-block" data-toggle="collapse" data-target=".navbar-collapse"> 
 
         <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 class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li class="hidden-lg hidden-md hidden-sm"><a href="">1</a></li> 
 
         <li class="hidden-lg hidden-md hidden-sm"><a href="#">2</a></li> 
 
         <li class="hidden-lg hidden-md hidden-sm"><a href="#">3</a></li> 
 
         <li class="hidden-lg hidden-md hidden-sm"><a href="#">4</a></li> 
 
         <li class="hidden-lg hidden-md hidden-sm"><a href="#">5</a></li> 
 
         <li class="hidden-lg hidden-md hidden-sm"><a href="#">6</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 1

.navbar-default .navbar-brand{padding-right: 70px;} 
 
    .navbar-default .navbar-toggle{position: absolute;right: 0;} 
 
    @media (max-width: 768px) { 
 
    .navbar-toggle { 
 
     display: block; 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; \t 
 
     float: none; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
      <nav class="navbar navbar-default" role="navigation"> 
 
        <div class="navbar-header"> 
 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-navbar-collapse"> 
 
         <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 class="navbar-header"> 
 
        
 
       </div> 
 
        <a class="pull-left navbar-brand" href="#"> 
 
         <span><img alt="Logo" class="brnd" src="" height="30" /></span> 
 
         |Specialty FORCES 
 
        </a> 
 
         
 
         </div> 
 
        </div> 
 
        <div class="collapse navbar-collapse" id="jb-navbar-collapse"> 
 
         <ul class="nav navbar-nav navbar-nav-fix"> 
 
      <li class="hidden-lg hidden-md hidden-sm"><a href="#">1</a></li> 
 
      <li class="hidden-lg hidden-md hidden-sm"><a href="#">2</a></li> 
 
      <li class="hidden-lg hidden-md hidden-sm"><a href="#">3</a></li> 
 
      <li class="hidden-lg hidden-md hidden-sm"><a href="#">4</a></li> 
 
      <li class="hidden-lg hidden-md hidden-sm"><a href="#">5</a></li> 
 
      <li class="hidden-lg hidden-md hidden-sm"><a href="#">6</a></li> 
 
         </ul> 
 
        </div> 
 
        </nav>

希望這個解決您的問題