2014-09-23 7 views
4

我已經開始創建一個帶引導程序的網站設計,需要一些幫助。我有6個容器,我需要爲不同的屏幕尺寸安排(和縮放),但我不能讓它工作。引導響應流體佈局

我要爲屏,不同的設計(像素):

  • 992px和超越
  • 768px到991px
  • 480像素-766px
  • 小達439px

我想安排我的頁面組件如下圖: layouts for different screen sizes

我該怎麼做?我是否需要創建4種不同的佈局,並使用隱藏類來確定要顯示的佈局?在更新內容時,這似乎很多工作。或者我可以用一些bootstrap黑魔法來做到這一點嗎?

+0

我認爲這是可能的http://isotope.metafizzy.co/和尺寸,你可以看的更改http ://metafizzy.co/blog/isotope-animating-item-sizes/ – 2014-09-23 13:31:08

回答

1

你使用了什麼引導程序?無論如何,我會幫你的。假設你使用3.2.0 ...

http://www.bootply.com/krobF8P83o

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-4 col-sm-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

你們都很棒,謝謝 – Goran 2014-09-30 15:01:36

2

我認爲你將不得不在自舉之上使用一些自定義css,也許定義一些媒體查詢來改變不同窗口大小的類風格的定義。

我的建議是看Bootstrap 3是如何合理的導航。當視口寬度減小時,它們以類似的方式改變。

http://getbootstrap.com/components/#nav-justified

0

引導儘可能最低的寬度是768px,超過這個一切都將被處理的相同。

但您可以將多個col-width類分配給一行內的一個div。

<div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       A 
       </div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       B 
       </div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       C 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3"> 
       D 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6"> 
     E 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6"> 
     F 
     </div> 
    </div> 
0

這絕對有可能。 Here是一個小提琴和video demo。您只需要customize Bootstrap即可將媒體查詢斷點插入自定義像素尺寸,並調整相同媒體查詢的單元高度(以使E == A + C == B + D)。

的HTML:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-8 col-lg-12"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>A</span></div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>B</span></div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>C</span></div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>D</span></div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-md-4 col-lg-6"><span>E</span></div> 
     <div class="col-md-12 col-lg-6"><span>F</span></div> 
    </div> 
</div> 

而CSS:

span { 
    display: block; 
    float: left; 
    width: 100%; 
    padding: 100px 0; 
    border: 5px solid black; 
    font-size: 40px; 
    font-weight: bold; 
    text-align: center; 
} 
.row { 
    margin: 0; 
} 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    padding: 0; 
    margin: 0; 
}