如何为div应用Bootstrap Grid System实现响应式区块布局？

阿华AIGC实验室

2026-5-28

用Bootstrap网格系统实现响应式分类区块布局

嘿，我来帮你把这些分类区块改成响应式的！Bootstrap的网格系统是实现响应式布局的利器，咱们一步步来改造你的代码：

第一步：确保引入Bootstrap CSS

首先得在你的页面<head>里加上Bootstrap的CSS链接（如果还没加的话）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

（这里用的是Bootstrap 5的CDN，你也可以用本地文件或者其他版本）

第二步：重构HTML结构

把你原来的自定义容器替换成Bootstrap的网格结构：.container（或.container-fluid）+ .row + .col-*响应式列类。这样不同屏幕尺寸下，区块会自动调整排列方式。

修改后的HTML代码：

<div class="main_txt container py-4">
  <div class="row g-4"> <!-- g-4用来设置列之间的间距，你可以根据需要调整 -->
    <!-- 第一个分类区块：Automotive -->
    <div class="col-md-6 col-sm-12"> <!-- 桌面端占6列（半宽），平板及以下占12列（全屏） -->
      <div class="main_service main_auto h-100">
        <h4>
          <a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a>
        </h4>
        <p>
          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto Spare Parts</a>
          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles"> Commercial Vehicles</a>
          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants"> Oil value Lubricants</a>
          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries"> Tyres and Batteries</a>
          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools"> Automotive Tools</a>
          <span class="float-end"><a href="searchcat1.aspx?cat=Automotive">more ...</a></span>
        </p>
      </div>
    </div>

    <!-- 第二个分类区块：Building and Interiors -->
    <div class="col-md-6 col-sm-12">
      <div class="main_service main_build h-100">
        <h4>
          <a href="searchcat1.aspx?cat=Building and Interiors">Building and Interiors</a>
        </h4>
        <p>
          <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles"> Aluminum and Steel Profiles</a>
          <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment"> Bathroom and Kitchen Equipment</a>
          <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical"> Cables and Electrical</a>
          <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools"> Hardware and Tools</a>
          <span class="float-end"><a href="searchcat1.aspx?cat=Building and Interiors">more ...</a></span>
        </p>
      </div>
    </div>
  </div>
</div>

这里的关键改动：

用.container包裹整个内容，保证内容在不同屏幕上有合适的宽度
用.row作为列的容器，Bootstrap会自动处理列的浮动和间距
.col-md-6表示在中等屏幕（≥768px）上每个区块占12列中的6列（也就是并排显示）；.col-sm-12表示在小屏幕（<768px）上每个区块占满整行，自动堆叠
把原来的.right替换成Bootstrap的.float-end（Bootstrap 5的类，Bootstrap 4用.float-right），实现“more...”右对齐
给.main_service加.h-100，确保两个区块高度一致（如果内容长度不同的话）

第三步：调整自定义CSS

去掉原来的固定宽度和浮动（因为Bootstrap的列已经处理了这些），只保留背景图、内边距、高度等样式：

.main_service {
  height: 136px;
  padding: 20px 20px 0 90px;
  background-repeat: no-repeat;
  background-position: left center; /* 让背景图位置更稳定 */
}
.main_auto {
  background-image: url(images/category/auto.gif);
}
.main_build {
  background-image: url(images/category/build.gif);
}
/* 小屏幕下的样式调整，让布局更适配移动端 */
@media (max-width: 767px) {
  .main_service {
    padding-left: 60px;
    height: auto; /* 让高度自适应内容 */
  }
}

这样调整后，你的分类区块在桌面端会并排显示，在手机或平板上会自动堆叠，完美实现响应式效果～

内容的提问来源于stack exchange，提问作者chetan kambli