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` 将占据整个行。