2015-06-13 70 views
0

在引導nav中,我們可以以摺疊格式顯示菜單。 相似我想以collasing格式顯示div。例如,如果它是移動視圖,那麼只顯示頂部的div,並隱藏所有的div在摺疊模式。我知道以下支持自舉響應Bootstrap Responsive:在摺疊模式下顯示多個div

.visible-phone 
.visible-tablet 
.visible-desktop 
.hidden-phone 
.hidden-tablet 
.hidden-desktop 

如果不支持,請全部分享它的想法如何實現。

回答

-1

我認爲您可以使用Javascript。 您可以使用JavaScript創建合攏效果(已在Bootstrap中實現:http://getbootstrap.com/javascript/查找「合攏」)。 事實上,你根本不需要編寫任何Javascript代碼。

0

nirajkumar,看看這個Fiddle
您可以使用.hidden-xs Bootstrap類來做你想做的事。
使用版本3.3.4。

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-1 col-lg-3 col-lg-offset-1 text-center block2 hidden-xs"> 
    Div #1 
</div> 
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-4 text-center block2"> 
    Div #2 
</div> 
+0

我知道.hidden-xs(.visible-phone)和其他東西。我已經在帖子中提到過。但我真正想要的是如何只顯示某個部分,並在滑動/或某些動作時顯示其他內容.....就像菜單/我們顯示移動設備的按鈕並隱藏實際菜單..... – nirajkumar

+0

你好,抱歉沒有提到你已經嘗試過'hidden-xs'。據我所知,你只是想在某些斷點處打開或關閉某些東西。如果是這樣,那麼只需設置自己的媒體查詢斷點即可。並使用'display:block;'和'display:none;'等。這有幫助嗎? – AngularJR

+0

實際上我曾經提到「.visible-phone」,它來自較早版本的bootstrap ...解釋我真正尋找的是...而不是腳手架引導http://getbootstrap.com/2.3.2/ scaffolding.html ...我想要的內容來刷卡..或在一些行動不做scafffolding ........所以我問它是否支持bootstrap ..而不是寫自己的邏輯... – nirajkumar