Bootstrap grid div以特定大小推出

Question

我想创建一个布局，左侧的一个图像占据6列和2行，右侧的4个方块占据另一半，即每个图像占据3列，2个在上，2个在下。

这一切都很好，除了1个图像被下推。当屏幕变小时，它会弹出，然后以其他较小的尺寸再次下降。

这是在bootply上

下面是我的代码：

<div class="container">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="box1 col-md-6">
                <img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
             </div>
             <div class="box1 col-md-3 col-sm-6">
                 <img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal.jpg">
             </div>
             <div class="box1 col-md-3 col-sm-6">
                 <img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal5.jpg">
             </div>
             <div class="box1 col-md-3 col-sm-6">
                 <img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
             </div>
             <div class="box1 col-md-3 col-sm-6">
                 <img src="http://www2.buit.ie/wp-content/uploads/2015/06/tentego_wagen.jpg">
             </div>
         </div>
     </div>
 </div>    

我的CSS是：

.box1 img {
    width:100%;
}

.container {
    width:100%;
    padding:0px;
    max-width: 1265px;
    overflow: auto;
}

.row {
    margin-left: 0px;
    margin-right: 0px;    
}

.col-md-3, .col-md-6, .col-sm-6 {
    padding-left: 0px;
    padding-right: 0px;      
}

请原谅我的图片--我的目的是设计一个农业网站！

任何帮助或见解都将不胜感激。

Answer 1

我已经确定这与你的形象不一致有关。

基本上，您的图像都是不同大小的，并且您没有努力对它们强制执行标准。您确实将它们放在引导列中，这使它们保持了适当的宽度，但高度仍然混乱，只是略有不同，这有时会将您的最后一张图像踢到下一行。

我通过添加一个height:auto更改了这个css，这很有帮助。

.box1 img{
    width:100%;
    height: auto;
}

然后我试着让右边的所有四张图片都是同一张图片，这个问题完全消失了。如果你想看整件事的话我把你的bootply over here叉开了。

我不得不说，它看起来很整洁，你应该为自己感到自豪。除了这个小插曲，它的流畅性真的很好。您可以考虑设置max-height，或者将height设置为auto (如果您确保所有图片都是相同的纵横比)。它们已经接近相同的纵横比，但它给你带来了这些细微的差异，这些细微的差异很难用视觉来检测，但却搞乱了你的布局。

Answer 2

Rufus，试着这样做。

这是完整大小的。

使用3组行看起来可以帮助你实现这里的目标。

额外的类也有助于保持您正在寻找的布局。

<div class="container-fluid col-lg-12">

    <div class="row-fluid col-sm-6 col-md-6 col-lg-6">
        <div class="box1 col-sm-12 col-md-12 col-lg-12">
            <img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
        </div>
    </div>

        <div class="row-fluid col-sm-6 col-md-6 col-lg-6">
            <div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal.jpg">
            </div>

            <div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <img src="http://www2.buit.ie/wp-content/uploads/2015/06/roseveal5.jpg">
            </div>
        </div>

        <div class="row-fluid col-sm-6 col-md-6 col-lg-6">
            <div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <img src="http://www2.buit.ie/wp-content/uploads/2015/06/Sheep-002-Wm.jpg">
            </div>

            <div class="box2 col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <img src="http://www2.buit.ie/wp-content/uploads/2015/06/tentego_wagen.jpg">
            </div>

        </div>

</div>