避免在较小的屏幕上将第二行移至下一行 Bootstrap 3

Posted 2023-03-06

【中文标题】避免在较小的屏幕上将第二行移至下一行 Bootstrap 3

【英文标题】：Avoid second row moving to next line on smaller screens Bootstrap 3

【发布时间】：2016-11-10 22:07:18

【问题描述】：

我有一个问题，我无法完全理解。

我有 2 行，每行 3 张图片。我想要的是在 841px 及更低的屏幕上，列应该是 50% - 这很好用，但是因为它们是 3 行，在移动设备上我有 2-1 和 2-1。第二行从新行开始，这可能是注定要发生的，但问题是如何避免它？

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

JSFIDDLE

html

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

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

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

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

 <div class="col-xs-4">
  <a href="#"><img src="https://s32.postimg.org/o68pvc4fl/image.jpg"  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

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

一屏一屏

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"  class="img-responsive margin-bottom"/></a>
 </div>

谢谢

【参考方案2】：

在 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"  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"  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"  class="img-responsive margin-bottom"/></a>
  </div>
</div>

在 x-small 屏幕中，您的所有图像部分都占用整行，小屏幕连续占用 2 个，另外一个被包裹，中号屏幕连续占用 3 个。