bootstrap响应式网格系统 代码案例

以下是 Bootstrap 响应式网格系统的代码案例：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这里是内容 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这里是内容 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这里是内容 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 这里是内容 -->
    </div>
  </div>
</div>

在上面的代码中，`.container` 是用来包裹整个网格系统的容器，`.row` 是用来包裹每一行网格的容器，而 `.col-*` 则是用来定义每一个网格的大小。在上面的例子中，每一行有四个网格，其中在小屏幕下每个网格占用 6 个网格，中等屏幕下每个网格占用 4 个网格，大屏幕下每个网格占用 3 个网格。这样，在不同屏幕尺寸下，每一行中每个网格的大小都会自动调整。