Bootstrap 3 - 如何將導航收起組件打開onLoad

我正在使用Bootstrap3並在我的設計中使用可摺疊的元素。Bootstrap 3 - 如何將導航收起組件打開onLoad

<!-- Search Filter --> 
<div id="search-filter"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-5 col-xs-12"> 

     <!-- Collapse Search --> 
     <button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button> 
     <!-- /Collapse Search --> 

     <h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3> 

     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="searchbar-collapse-set"> 

     <div class="col-md-4 col-xs-12"> 
      <div class="distance"> 
      <h5>distance:</h5> 
      <div id="distance-slider"></div> 
      <span class="distance-value">250 kms</span> 
      </div> 
     </div> 

     <div class="col-md-3 col-xs-12"> 
      <div class="sort"> 
      <h5>sort:</h5> 
      <ul class="nav nav-pills"> 
       <li class="active"><a href="#">popular</a></li> 
       <li><a href="#">name</a></li> 
       <li><a href="#">distance</a></li> 
      </ul> 
      </div> 
     </div> 

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

     <div class="clearfix"></div> 

    </div> 
    </div> 
</div> 
<!-- /Search Filter -->

如何使用Media-Query或JS在默認情況下在較小的設備上保持打開狀態？

來源

2014-06-27 Harsha M V

添加「在」類到你的搜索欄倒塌集DIV像這樣：

<div class="navbar-collapse collapse in" id="searchbar-collapse-set">

編輯：

的切換是通過媒體查詢控制。它的顯示在此規則設置爲none爲768px：

@media (min-width: 768px) { 
    .navbar-toggle { 
    display: none; 
    } 
}

所以你可以重寫規則在您自己的樣式或定製引導css文件。

來源

2014-06-27 08:28:13 jme11

有沒有一種方法可以使用JS激活它。我想要切換按鈕的圖標 –

切換顯示的位置在CSS中設置。它不受js控制。是的，您可以編寫js/jQuery函數來控制顯示或隱藏切換，但您必須檢查窗口寬度並處理調整大小事件。老實說，使用css更容易。另外，您不必使用navbar-collapse類。您可以將任何div設置爲可摺疊元素，那麼您不必重寫現有的導航欄切換規則，只需創建自己的。 – jme11

我想要崩潰類，以便它與斷點同步，我不必爲管理它們而煩惱：D –

Bootstrap 3 - 如何將導航收起組件打開onLoad

回答

相關問題