Bootstrap 网格 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

鲁弗斯，试试这样吧。
这是完整尺寸 Fiddle。

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