避免第二行移到较小屏幕的下一行Bootstrap 3 [英] 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.

我有2行，共3张图像.我想要的是在841px及以下的屏幕上，列应为50％-这样做很好，但是因为它们是3行，所以在移动设备上我具有2-1和2-1.第二行以可能会发生的新行开头，但问题是如何避免呢?

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?

我已经设置了一个jsfiddle来向您展示我的意思.我希望图像4填补3右边的空白，以便所有图像以连续的顺序排列而没有任何空白.我试着将图像浮动到左侧，以查看是否将其拉起，但是没有运气.

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

}

推荐答案

固定小提琴

这是您需要使用多个列类的情况 在一起.

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

按屏幕显示

xs可在移动设备上使用.

xs works on mobile device.

sm小型设备，例如平板电脑.

sm small device eg tablet.

md中型设备

lg大型台式机

我建议您删除自定义的CSS代码.

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

谢谢

这篇关于避免第二行移到较小屏幕的下一行Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！