Question

我在这里遇到一个问题，我无法全面了解。

我有2行3张图片。我想要的是在841px及更低的屏幕上，列应为50％ - 这可行，但因为它们是3行，在移动设备上我有2-1和2-1。第二行从一条新线开始，这可能意味着要发生，但问题是如何避免它？

我已经设置了一个jsfiddle来向你展示我的意思。我希望图像4填充3右侧的间隙，以便所有图像以连续的顺序进行，没有任何间隙。我试着将图像漂浮到左边，看看是否拉起来却没有运气。

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

}

Answer 1

在Boostrap中，他们在网格系统中为每个设备GRID SYSTEM FOR Mobile, tablet, desktop分别设置了类。 col-xs用于额外的小型设备，col-md用于中型设备，col-sm用于小型设备。

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>

在x小屏幕中没有，你的所有图像部分都占据整行，小屏幕需要连续2行，其他一个被包裹，连续中等3行。

Answer 2

Fixed fiddle

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

根据屏幕显示

xs适用于移动设备。

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

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

2 个答案: