自舉響應流體布局

Question

我已經開始使用bootstrap創建一個網站設計，需要一些幫助。 我有6個容器，我需要安排（和縮放）不同的屏幕尺寸，但我不能讓它工作。

我想要不同的屏幕設計（以像素為單位）：

• 992px及以上
• 768px到991px
• 480像素-766px
• 小到439像素

我想將我的頁面組件排列如下圖：

我怎樣才能做到這一點？ 我是否需要創建4種不同的布局並使用隱藏類來阻止要顯示的布局？ 在更新內容時，這似乎很多工作。 或者我可以用一些引導黑魔法做到這一點？

Answer 1

我認為你必須在bootstrap之上使用一些自定義css，或者定義一些媒體查詢來改變不同窗口大小的類樣式的定義。

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

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

Answer 2

你用的是什么引導程序？ 無論如何，我會幫助你。 假設你使用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> 

Answer 3

bootstrap最低可能的寬度是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>

Answer 4

這絕對是可能的。 這是一個小提琴和一個視頻演示 。 您只需自定義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;
}