Avoid second row moving to next line on smaller screens Bootstrap 3

问题

I've got an issue here that I can't quite get my head round.

I have 2 rows of 3 images. What I want is on screens 841px and lower, the columns should be 50% - this works fine however as they are rows of 3, on mobile I have 2-1 and 2-1. The second row starts on a new line which probably is meant to happen but the questions is how to avoid it?

I've set up a jsfiddle to show you what I mean. I want image 4 to fill that gap on the right of 3 so that all images go in a continuous order without any gaps. I tried floating the images to left to see if that pulled it up but no luck.

JSFIDDLE

HTML

<div class="row">
 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/hm1cb910x/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>

 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/f5zixeiy9/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>

 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/aldcigz8x/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>
</div>

<div class="row">
 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/kjyb4y8oh/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>

 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/duwd2ocq9/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>

 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/o68pvc4fl/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>
</div>

CSS

.margin-bottom {
padding-bottom:20px;
}

@media (max-width: 841px) {
.col-xs-4 {
width:50%;
}
}

@media (max-width: 511px) {
.col-xs-4 {
width:100%;
}

}

回答1:

Fixed fiddle

this is the situation you need to use more than one column class together.

accoroding to screen for screen

xs works on mobile device.

sm small device eg tablet.

md medium devices

lg large desktops

i advice you to remove your custom css codes.

<div class="col-xs-6 col-sm-4 col-md-3">
  <a href="#"><img src="https://s32.postimg.org/o68pvc4fl/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
 </div>

thank you

回答2:

In Boostrap they are having separate classes in grid system, for every devices GRID SYSTEM FOR Mobile, tablet, desktop. col-xs for extra small devices, col-md for medium devices, col-sm for small devices.

Updated Fiddle

<div class="row">
   <div class="col-xs-12 col-sm-6 col-md-4">
    <a href="#"><img src="https://s32.postimg.org/hm1cb910x/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
   </div>

  <div class="col-xs-12 col-sm-6 col-md-4">
    <a href="#"><img src="https://s32.postimg.org/f5zixeiy9/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4">
    <a href="#"><img src="https://s32.postimg.org/aldcigz8x/image.jpg" alt="" class="img-responsive margin-bottom"/></a>
  </div>
</div>

No in x-small screens all your image section take full row, small screen it takes 2 in a row other one is wrapped and in medium 3 in a row.

来源：https://stackoverflow.com/questions/38264947/avoid-second-row-moving-to-next-line-on-smaller-screens-bootstrap-3

标签

css

twitter-bootstrap-3

grid