2014-12-05 104 views
1

美好的一天!我想弄清楚下面的情況是否可行。Bootstrap GRID系統可能嗎?

當它在臺式機/筆記本電腦的佈局應該是這樣的

<div class="col-md-3"> 
sidebar 
</div> 

<div class="col-md-9"> 
article 
</div> 

當它是小屏幕上的兩個格將切換,且必須是這樣一個

<div class="col-md-9"> 
sidebar 
</div> 

<div class="col-md-3"> 
article 
</div> 

你的答案感謝!

+0

顯示樣品輸出 – 2014-12-05 12:45:57

+0

@ArunKumar這只是我的示例代碼。請告訴我爲什麼我需要顯示輸出? – asolo 2014-12-05 12:47:33

回答

2

你可以!通過向<div>添加多個網格類,您可以爲每個斷點定義列的大小。在你的情況下,這可能是側欄上的col-xs-9 col-md-3和文章上的col-xs-3 col-md-9。這將使側邊欄佔用12個列中的9個,用於xssm斷點尺寸,以及12個列中的3個用於mdlg斷點尺寸。

以全屏模式打開以下示例以播放斷點。

.box { 
 
    border: 1px solid #c66; 
 
    background-color: #f99; 
 
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-xs-9 col-md-3 box"> 
 
    sidebar 
 
</div> 
 
<div class="col-xs-3 col-md-9 box"> 
 
    article 
 
</div>


從您的評論我看到你想要的文章是在側欄上的小屏幕上。這有點棘手。你需要做三件事:

  1. 開始移動首先從小屏幕的佈局開始。您需要更改邊欄和文章<div>的順序。

  2. 確保在小屏幕上,使用col-xs-12時,側邊欄和文章佔用12列中的12列。這將使側邊欄被推到文章下方。

  3. 請注意,在桌面屏幕上,邊欄和文章確實出現在海誓山盟旁邊,但側邊欄位於右側而不是左側。您可以通過將側邊欄拉向左側,通過添加col-md-pull-9(您需要將它拉到左側9列,文章佔用的列的數量)並將文章向右推,通過添加col-md-push-3(您需要將它向右推3列,邊欄佔用的列數)。

參見更新的例子:

.box { 
 
    border: 1px solid #c66; 
 
    background-color: #f99; 
 
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-xs-12 col-md-9 col-md-push-3 box"> 
 
    article 
 
</div> 
 
<div class="col-xs-12 col-md-3 col-md-pull-9 box"> 
 
    sidebar 
 
</div>

+0

好的!如果我有3格,那麼怎麼樣?例如

left side bar
articles
right side bar
asolo 2014-12-05 12:52:53

+0

當然可以。基本上通過添加類,您可以定義div應該使用12個列中的多少個。請參閱http://getbootstrap.com/css/#grid獲取文檔和一些不錯的示例 – ckuijjer 2014-12-05 12:54:43

+0

我沒有得到我想要的結果。這是'

sidebar
article
' http://i.imgur.com/vzupNt0.jpg原來的圖像,這是我想要的時候它是放大http://i.imgur.com/H3jULRX .jpg – asolo 2014-12-05 13:09:43

0

嘗試這種情況:

<div class="col-sm-9 col-md-3"> 
sidebar 
</div> 

<div class="col-sm-3 col-md-9"> 
article 
</div> 

這將顯示在特(XS)在9個街區側邊欄和小(sm),MeDium(md)和LarGe(lg)3塊,反之亦然。

1

引導指定寬度類別的前綴很少:-xs-/-sm-/-md-/-lg-(從最小到最大寬度)。

因此從-md-和更大的屏幕,你有col-md-3col-md-9。要在-md-類的前面以相反的順序獲取它們,您可以指定-xs--sm-前綴。

因此,要扭轉你的班,只寫:

<div class="col-md-9 col-xs-3"></div> 
<div class="col-md-3 col-xs-9"></div>