如何将css中的行从桌面上的3x3更改为移动设备上的2x4

How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

本文关键字：移动 2x4 3x3 桌面 css      更新时间：2023-09-26

下面的代码显示了桌面每行3个图像。当在手机上观看时，它会显示2张图像，然后是1张，然后是2张，然后1张，再是2张等等。

我如何才能在移动设备上有4行2，而在桌面上仍然保留3行3？

感谢

<div class="row">
    <div class="col-xs-6 col-md-4">
        <img class="images img-responsive" src="" alt="text"></img>  
    </div>
    <div class="col-xs-6 col-md-4">
        <img class="images  img-responsive" src="" alt="text"></img>
    </div>
    <div class="col-xs-6 col-md-4">
        <img class="images  img-responsive" src=""></img>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <img class="images img-responsive" src="" alt="text"></img>  
    </div>
    <div class="col-xs-6 col-md-4">
        <img class="images  img-responsive" src="" alt="text"></img>
    </div>
    <div class="col-xs-6 col-md-4">
        <img class="images  img-responsive" src=""></img>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">
        <img class="images img-responsive" src="" alt="text"></img>  
    </div>
    <div class="col-xs-6 col-md-4">
        <img class="images  img-responsive" src="" alt="text"></img>
    </div>
    <div class="col-xs-6 col-md-4">
        <img class="images  img-responsive" src=""></img>
    </div>
</div>

使用以下格式

(container)
  row
    col-md-4 col-xs-6
    col-md-4 col-xs-6
    ...(6x)

列将在彼此下方换行，因此在中等视图中，您将在一行中获得3列，而在移动视图中，将在一列中获得2列。

如果后面的列让您感到困扰，只需添加类col-xs-offset-3和col-md-offset-2（例如）。偏移将根据视图进行更改。您可以将此偏移设置为放置在新行第一个偏移之前的"不可见"列。

试试这个：

<div class="row">
    <div class="col-xs-6 col-md-4">
    <img class="images img-responsive" src="" alt="text"></img>  
    </div>
    <div class="col-xs-6 col-md-4"><img class="images  img-responsive" src="" alt="text"></img>
    </div>
    <div class="col-xs-6 col-md-4"><img class="images  img-responsive" src=""></img>
    </div>

    <div class="col-xs-6 col-md-4">
    <img class="images img-responsive" src="" alt="text"></img>  
    </div>
    <div class="col-xs-6 col-md-4"><img class="images  img-responsive" src="" alt="text"></img>
    </div>
    <div class="col-xs-6 col-md-4"><img class="images  img-responsive" src=""></img>
    </div>

    <div class="col-xs-6 col-md-4">
    <img class="images img-responsive" src="" alt="text"></img>  
    </div>
    <div class="col-xs-6 col-md-4"><img class="images  img-responsive" src="" alt="text"></img>
    </div>
    <div class="col-xs-6 col-md-4"><img class="images  img-responsive" src=""></img>
    </div>
  </div>

在单个row类中全部拉入并使用col-sm-4 col-xs-6

对于宽度（≥768px），col-sm-4将起作用，而对于宽度（<769px），则col-xs-6将起作用。

相关文章：