bootstrap栅格系统 中等屏幕下4个图片一行展示全部，超小屏幕下4个图片一行展示2个

Bootstrap栅格系统是一种响应式设计工具，它通过CSS媒体查询来实现不同屏幕尺寸下的布局调整。对于在中等屏幕（如平板电脑）以下需要显示四个图片一行的情况，你可以使用`col-sm-3`类给每个图片容器设置，因为Bootstrap的`sm`网格系统从手机到平板电脑，每行有十二列，所以四张图片占据三列。

然而，当屏幕变得非常小，比如超小屏幕（如手机竖屏）时，需要改变为两列展示，这时应该使用`col-xs-6`，即在小屏幕（xs）下，每行有六列。完整的HTML结构可能会像这样：

<div class="row">
  <div class="col-3 col-xs-6">图片1</div>
  <div class="col-sm-3 col-xs-6">图片2</div>
  <div class="col-sm-3 col-xs-6">图片3</div>
  <div class="col-sm-3 col-xs-6">图片4</div>
</div>

如果你有多于四个的图片，只需循环添加`col-sm-3 col-xs-6`即可，并确保总和不超过12列，保持响应式的特性。

相关问题

bootstrap栅格系统 中等屏幕一行展示4个，超小屏幕一行展示2个 代码展示

Bootstrap 的栅格系统（Grid System）是基于响应式设计的，它通过 CSS 类来控制元素在不同设备屏幕尺寸下的布局。如果你想让在中等屏幕（如平板电脑）上显示4列，而在超小屏幕（如手机）上显示2列，你可以使用以下代码结构：

<div class="container">
  <div class="row">
    <!-- 中等屏幕下每行4列 -->
    <div class="col-md-3 col-sm-6">内容1</div>
    <div class="col-md-3 col-sm-6">内容2</div>
    <div class="col-md-3 col-sm-6">内容3</div>
    <div class="col-md-3 col-sm-6">内容4</div>

    <!-- 超小屏幕下每行2列 -->
    <div class="col-xs-12">内容5 (在xs屏幕下会占据一整行)</div>
  </div>
</div>

这里 `col-md-3` 表示在大屏幕（medium）及以上设备上占三列，`col-sm-6` 则表示在中等屏幕（small）上占六列。当屏幕变得更小（比如 extra small，即xs），`col-xs-12` 将占据整个行。