Question

我开始使用bootstrap 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 -->

我自己的课程是：

＆＃13;

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

＆＃13;

我认为这是一个非常简单的解决方案，但我无法得到它。模板http://startbootstrap.com/template-overviews/shop-homepage/ 对我来说不起作用，我使用相同的图像属性（witdht，height）。问题是如何将红色，橙色和黄色图像垂直设置为sm-md-lg宽度的同一行，因为现在我无法将黄色右图像设置为与红色和橙色框的右侧对齐与黄色和红色一致 - 它们以不同的屏幕移动。

Answer 1

要在sm，md和lg的同一行上设置红色，黄色和橙色图像，您可能希望将它们放在同一行类中以开始。

其次，您可能希望根据您想要内联的图像数量来设置col-（大小） - （数字）数字。例如，如果您执行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>

现在应该这样做。对不起以前的坏例子，匆忙做了。

不规则图片库Bootstrap

1 个答案: