不規則圖片庫Bootstrap

Question

我開始使用引導CSS框架。 擁有Html，Css，Jquery和其他方面的經驗，在我的第一個項目中，我遇到了不規則圖像庫的問題：

這是模板。

我將代碼如下，但這並不是最好的-在不同的屏幕中它會崩潰：

<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-0 artw najprawy">
<h3>abc/h3> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 najprawy">
<img src="yellow.jpg" class="biel pull-right" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy ">
<img src="orange.jpg" class="biel pull-right" style="margin-right:5px;" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy ">
<img src="orange.jpg" class="biel pull-right" style="margin-right:5px;" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy">
<img src="orange.jpg" class="biel pull-right" />
</div>
</div><!-- col-6 -->

<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-0 artw  najprawy">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 najprawy">
<img src="yellow.jpg" class="biel pull-right" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy">
<img src="orange.jpg" class="biel pull-right" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy">
<img src="orange.jpg" class="biel pull-right" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy">
<img src="orange.jpg" class="biel pull-right" alt="" style="margin-right:0px;" />
</a> 
</div>
</div><!-- col-6 -->
</div><!-- row -->

我自己的課程是：

 .najprawy {padding-right:0px;margin-right:0px;} div.artw img.biel {margin-bottom:20px} img.biel {border:solid 1px #fff;} 

我想這是一個非常簡單的解決方案，但我無法理解。 模板http://startbootstrap.com/template-overviews/shop-homepage/對我不起作用，盡管我使用的是相同的圖像屬性（寬度，高度）。 問題是如何在sm-md-lg寬度上垂直設置同一行中的紅色，橙色和黃色圖像，因為到目前為止，我無法將黃色右圖像設置為與紅色一框和橙色框的右側成一直線黃色和紅色-它們在不同的屏幕上移動。

Answer 1

要在sm，md和lg中的同一行上設置紅色，黃色和橙色圖像，您首先需要將它們放在同一行類中。

其次，您需要根據要內聯的圖像數量輸入col-（size）-（number）號。 例如，如果您使用col-xs-12，則在移動設備上，該列將填滿整個網格，從而將下一項推到下一行。

理想情況下，無論如何您都不希望將所有這些圖像內聯在移動設備上。

例如：

<div class="col-xs-2 col-sm-2 col-lg-2">
    //image code here
</div>

上面的代碼重復了6次，將有6列包含移動設備，平板電腦和台式機上的圖像。

但是，這樣做效率不高，因為它們在整個設備上都是相同的，因此您可以將其縮短為

<div class="col-xs-2">
    //image code here
</div>

這將與第一個示例具有相同的效果。

編輯：

<div class="container">
    <div class="row>
        <div class="col-lg-12">
            //image code
        </div>
    </div>
    <div class="row>
        <div class="col-lg-6">
            //image code
        </div>
        <div class="col-lg-4">
            //image code
        </div>
        <div class="col-lg-4">
            //image code
        </div>
        <div class="col-lg-4">
            //image code
        </div>
        <div class="col-lg-6">
            //image code
        </div>
        <div class="col-lg-4">
            //image code
        </div>
        <div class="col-lg-4">
            //image code
        </div>
        <div class="col-lg-4">
            //image code
        </div>
    </div>
</div>

新編輯：

<div class="container">
    <div class="row>
        <div class="col-lg-12">
            //image code
        </div>
    </div>
    <div class="row>
        <div class="col-lg-6>
            <div class="col-lg-12">
                //image code
            </div>
            <div class="col-lg-4">
                //image code
            </div>
            <div class="col-lg-4">
                //image code
            </div>
            <div class="col-lg-4">
                //image code
            </div>
        </div>
        <div class="col-lg-6>
            <div class="col-lg-12">
                //image code
            </div>
            <div class="col-lg-4">
                //image code
            </div>
            <div class="col-lg-4">
                //image code
            </div>
            <div class="col-lg-4">
                //image code
            </div>
        </div>
    </div>
</div>

現在應該可以解決問題了。 很抱歉以前有不好的例子，很着急。