2013-08-12 37 views
3

我升級到引導3,在我的資產淨值有一個簡單的下拉菜單(http://bootply.com/73584):引導程序3中摺疊的下拉菜單丟失了嗎?

<div class="navbar"> 
    <div class="container"> 

    <!-- .navbar-toggle is used as the toggle for collapsed navbar content --> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <!-- Be sure to leave the brand out there if you want it shown --> 
    <a class="navbar-brand" href="#">Title</a> 

    <!-- Place everything within .nav-collapse to hide it until above 768px --> 
    <div class="nav-collapse collapse navbar-responsive-collapse"> 

    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Link</a></li> 

    <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
      Dropdown <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 



    </ul> 

    </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
</div><!-- /.navbar --> 

在摺疊手機,查看下拉仍然彈出;它不會像Bootstrap 2中那樣添加子菜單子項。這是缺失還是故意的?任何人都知道我可以如何添加bootstrap 2行爲?

感謝

+0

僅供參考,同樣也適用於nav – alias51

回答

2

你是正確的,我不知道這是這個缺失或故意(參見:https://github.com/twbs/bootstrap/issues/9253)。

您可以應用在Twitter的引導2,樣式規則:

@media (max-width: 979px) 
{ 
    .nav-collapse .dropdown-menu a { 
    padding: 9px 15px; 
    font-weight: bold; 
    color: #777777; 
    -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
      border-radius: 3px; 
    } 
    .nav-collapse .btn { 
    padding: 4px 10px 4px; 
    font-weight: normal; 
    -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px; 
    } 
    .nav-collapse .dropdown-menu li + li a { 
    margin-bottom: 2px; 
    } 

    .nav-collapse .dropdown-menu a:hover, 
    .nav-collapse .dropdown-menu a:focus { 
    background-color: #f2f2f2; 
    } 

    .navbar-inverse .nav-collapse .dropdown-menu a:hover, 
    .navbar-inverse .nav-collapse .dropdown-menu a:focus { 
    background-color: #111111; 
    } 
    .nav-collapse.in .btn-group { 
    padding: 0; 
    margin-top: 5px; 
    } 
    .nav-collapse .dropdown-menu { 
    position: static; 
    top: auto; 
    left: auto; 
    display: none; 
    float: none; 
    max-width: none; 
    padding: 0; 
    margin: 0 15px; 
    background-color: transparent; 
    border: none; 
    -webkit-border-radius: 0; 
     -moz-border-radius: 0; 
      border-radius: 0; 
    -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
      box-shadow: none; 
    } 
    .nav-collapse .open > .dropdown-menu { 
    display: block; 
    } 
    .nav-collapse .dropdown-menu:before, 
    .nav-collapse .dropdown-menu:after { 
    display: none; 
    } 
    .nav-collapse .dropdown-menu .divider { 
    display: none; 
    } 
    .nav-collapse .nav > li > .dropdown-menu:before, 
    .nav-collapse .nav > li > .dropdown-menu:after { 
    display: none; 
    } 
} 

請參見:http://bootply.com/73740的結果。

+0

中的btn元素這似乎是一個很好的潛在答案,但應用此CSS對我沒有任何影響。還有什麼我失蹤? – Dave

+0

@dave afaik這已經在更新版本的BS中修復,請參閱http://getbootstrap.com/components/#navbar(另請參閱:https://github.com/twbs/bootstrap/pull/9403) –

+0

我沒有選項來更新Bootstrap,以便在樣式標籤之間應用完美的工作。 – iamyojimbo