Html 不规则图像库引导

我开始使用引导CSS框架。有了Html、Css、Jquery和其他一些方面的经验，在我的第一个项目W中，我遇到了不规则图像库的问题：

我把代码放在下面，但这不是最好的-在不同的屏幕上它会崩溃：

<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 -->

---

要在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>

//图像编码
//图像编码
//图像编码
//图像编码

---

现在，这应该可以解决问题了。对不起，前面的例子不好，你是匆忙做的。

你的问题是什么？或者，您是否可以提供一个使用JSFIDLE的代码的通用示例？您的代码与上下文不符，并且存在多个语法不一致。不幸的是，您没有使用JSFIDLE。@Lansara，我当然希望在mobile（col-xs-12）中设置不同的集合，而在其他程序中设置不同的集合，因此我将[code]col-sm-8 col-md-8 col-lg-6[/code]放入col-xs 12….其余的代码。。。。。否则col-md-8将在xs视图中被继承，并将其转换为col-xs-8。这对于我的需要来说是可以的，但也许在引导中获得这样的库是不可能的？没有什么是不可能的。尝试失败。再试一次失败。再试一次，成功——这就是生活的方式。但我离题了。请画一个简单的图表，说明你试图在Windows paint或任何你可以访问的编辑软件中实现什么，然后上传一个屏幕截图，给我一个链接，我会看看我们能为你做些什么。我将编辑我以前的答案，并向你展示如何实现这一点。