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 ，试试这样做。
这是完整尺寸 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>

Bootstrap网格div以特定大小推出

2 个答案: