Clever Geek Handbook

Bootstrap grid slit pops out at certain dimensions

I wanted to create a layout with one image on the left, taking up 6 columns and 2 'rows' and 4 squares on the right, taking up the second half, i.e. / each occupying 3 columns, 2 on top and 2 below.

Everything works fine, except 1 image is dumped. When the screen gets smaller, it pops back and then falls back again at other smaller dimensions.

Here it is on bootply

and here is my code:

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

My 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;      
}

Sorry for the images - I'm going to design some sort of farm site!

Any help or understanding would be so much appreciated.

+3


source to share


2 answers


I determined that this is because your images are not consistent.

Basically, your images are of different sizes and you don't make any effort to enforce the standard. You put them in bootstrap columns that keep them at the proper width, but the heights are still confusing and slightly different, sometimes causing your last image to be removed to the next line.

I modified this css by adding height:auto

which helped.



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

Then I tried to make all four images on the right the same image and the problem went away completely. I dismissed your bootply here if you want to see it all.

I have to say: it looks pretty neat, you should be proud of yourself. It's really better than this hiccup. You might want to set max-height

or set height

to auto

if you make sure your images are the same aspect ratio. They're already close to the same aspect ratio, but that gives you that subtle difference that was hard to detect visually, but screw up your layout.

+2


source


Rufus , try it like this. Here is the full size Fiddle .

Using three sets of strings will help you find what you are looking for. Additional classes also help keep the layout you are looking for.



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


source






More articles:


All Articles