2017-02-23 68 views
1

我試圖在自舉導航欄中使用navbar-btn,但是使它們恢復爲移動視圖上的正常鏈接。切換移動菜單上的自舉navbar-btn格式化

我已經使用visible- *類來替換「標準」導航項的按鈕,但我無法正確格式化摺疊下拉菜單。這是填充,我無法在visible-xs div中的兩個鏈接上工作,並且假設它是導致問題的類。

我已經試過以下(以及許多其他的我刪除)格式化菜單,但沒有對所有環節的工作:

.navbar-fixed-top > .navbar-collapse > .navbar-nav > li > a {padding: 10px 0;} 
.navbar-collapse.collapse.in > ul > li > a {padding: 10px 0;} 

我也嘗試添加類的鏈接:

.navbar-collapse.collapsing > ul > li > a.toggled {padding: 10px 0;} 
.navbar-collapse.collapse.in > ul > li > a.toggled {padding: 10px 0;} 

我也曾嘗試可見-XS-inline-block的和塊但這並沒有區別要麼

<div id="fixed-top" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" 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> 
      <a class="navbar-brand" href="#">logo</a> 
     </div> 

     <div class="collapse navbar-collapse"> 
      <!-- buttons visible on full-size screen only --> 
      <div class="visible-lg visible-md"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <div class="btn-group"> 
         <a class="toggled" href="#"><button type="button" class="btn navbar-btn nav-button active">login</button></a> 
         </div> 
        </li> 
        <li class="dropdown"> 
         <button type="button" class="btn navbar-btn nav-button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">my templates <span class="caret"></span></button> 
         <ul class="dropdown-menu inverse-dropdown"> 
          <li><a class="toggled" href="#">template 1</a></li> 
          <li><a class="toggled" href="#">template 2</a></li> 
          <li><a class="toggled" href="#">template 3</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 

      <ul class="nav navbar-nav"> 
       <!-- non-button menu on small screen only --> 
       <div class="visible-sm visible-xs"> 
        <li class="active"><a class="toggled" href="login.php">login</a></li> 
        <li class="dropdown"> 
         <a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">my templates <span class="caret"></span> 
         </a> 
         <ul class="dropdown-menu inverse-dropdown"> 
          <li><a class="toggled" href="#">template 1</a></li> 
          <li><a class="toggled" href="#">template 2</a></li> 
          <li><a class="toggled" href="#">template 3</a></li> 
         </ul> 
        </li> 
       </div> 
      <!-- visible on all sizes -->    
       <li><a class="toggled" href="index.php">home</a></li> 
       <li><a class="toggled" href="#">link 1</a></li> 
       <li><a class="toggled" href="#">link 2</a></li> 
       <li class="dropdown"> 
        <a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">dropdown<span class="caret"></span> 
        </a> 
        <ul class="dropdown-menu inverse-dropdown"> 
         <li><a class="toggled" href="#">link drop 1</a></li> 
         <li><a class="toggled" href="#">link drop 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 

我不會在這裏發佈CSS,但我已經在這裏:http://www.bootply.com/C0GXvXToTE#

也許有一種更容易的方式來實現我想要的東西,我失蹤了。我更喜歡沒有JavaScript。

關於如何在摺疊的所有鏈接上添加填充的任何想法?

+0

「所有鏈接」是什麼意思?我懷疑你只是想添加填充(並且看起來像只是「左填充」)到2個鏈接的「登錄」和「我的模板」。 – Hopeless

回答

3

嘗試給元素一個id然後樣式他們。它比遍歷引導CSS更方便。

#login-sm { 
 
       padding-left: 10px; 
 
      } 
 
      #dropdown-sm { 
 
       padding-left: 10px; 
 
      }
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
      <div id="fixed-top" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" 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> 
 
      <a class="navbar-brand" href="#">logo</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse"> 
 
      <!-- buttons visible on full-size screen only --> 
 
      <div class="visible-lg visible-md"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li> 
 
         <div class="btn-group"> 
 
         <a class="toggled" href="#"><button type="button" class="btn navbar-btn nav-button active">login</button></a> 
 
         </div> 
 
        </li> 
 
        <li class="dropdown"> 
 
         <button type="button" class="btn navbar-btn nav-button" data-toggle="dropdown" role="dropdown" aria-haspopup="true" aria-expanded="false">my templates <span class="caret"></span></button> 
 
         <ul class="dropdown-menu inverse-dropdown"> 
 
          <li><a class="toggled" href="#">template 1</a></li> 
 
          <li><a class="toggled" href="#">template 2</a></li> 
 
          <li><a class="toggled" href="#">template 3</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 

 
      <ul class="nav navbar-nav"> 
 
       <!-- non-button menu on small screen only --> 
 
       <div class="visible-sm visible-xs"> 
 
        <li id = "login-sm" class="active"><a class="toggled" href="login.php">login</a></li> 
 
        <li id = "dropdown-sm" class="dropdown"> 
 
         <a class="toggled" data-toggle="dropdown" role="dropdown" aria-haspopup="true" aria-expanded="false" href="#">my templates <span class="caret"></span> 
 
         </a> 
 
         <ul class="dropdown-menu inverse-dropdown"> 
 
          <li><a class="toggled" href="#">template 1</a></li> 
 
          <li><a class="toggled" href="#">template 2</a></li> 
 
          <li><a class="toggled" href="#">template 3</a></li> 
 
         </ul> 
 
        </li> 
 
       </div> 
 
      <!-- visible on all sizes -->    
 
       <li><a class="toggled" href="index.php">home</a></li> 
 
       <li><a class="toggled" href="#">link 1</a></li> 
 
       <li><a class="toggled" href="#">link 2</a></li> 
 
       <li class="dropdown"> 
 
        <a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">dropdown<span class="caret"></span> 
 
        </a> 
 
        <ul class="dropdown-menu inverse-dropdown"> 
 
         <li><a class="toggled" href="#">link drop 1</a></li> 
 
         <li><a class="toggled" href="#">link drop 2</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    </body> 
 
    </html>

希望這有助於!

+0

感謝您的提示,它的工作原理是我想要的:) – user3606041