Bootstrap开发中移动端如何实现div四区块布局

AI 小北

2026-8-29

响应式div布局适配移动端实现方案

我正在尝试调整div定位以适配移动设备浏览，目前div在桌面端视图下可正常排布，没有显示问题，桌面端显示效果如下：

预期移动端视图下元素按如下方式排布：
移动端预期排布效果

当前使用代码

CSS代码

.CeroPadCeroMar {
  padding: 0px;
  margin: 0px;
}

.texto-encimaAnalisis {
  position: absolute;
  top: 10%;
  left: 8%;
}

.TextoAnalisis {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 30px;
  color: #0F196C;
}

.TextoAnalisisDesc {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 15px;
  color: #616160;
}

HTML代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="Industria" class="CeroPadCeroMar">
  <div class="col-xs-12 col-lg-12 CeroPadCeroMar">
    <img src="../content/image-backgroud.png" class="img-responsive" alt="" width="auto" height="345">
    <div class="texto-encimaAnalisis">
      <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
        <div class="col-md-12" style="min-height: 199px;">
          <div class="row">
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                           Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>

          </div>
          <div class="col-md-4" style="margin-top: 50px; padding-right: 107px;">
            <p class="TextoAnalisis">
              <b style="font-weight: bold;">
                                        Lorem ipsum  amet. <br />dolor sit
                                    </b>
            </p>
            <p class="TextoAnalisisDesc">
              <b style="font-weight: bold;">
                                        Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                    </b>
            </p>

          </div>

        </div>

      </div>
    </div>
  </div>
</section>

问题

是否存在可使用的类或CSS属性，能够实现预期的移动端视图下div四区块排布效果？

解决方案

现有代码布局失效核心原因有三点：

栅格配置不符合规范：仅给内容块配置了桌面端的col-md-4类，未添加移动端对应栅格类；第四个内容块未放入row容器，结构不满足Bootstrap栅格要求
固定像素值未做响应式处理：写死的padding-right: 107px、margin-top: 50px在小屏设备上会挤压内容空间，造成错位、溢出
绝对定位容器无适配：小屏幕下固定百分比的偏移值容易导致文本层和背景图位置不匹配

直接通过Bootstrap原生栅格类+CSS媒体查询即可实现效果，无需额外引入插件：

调整栅格结构：将四个内容块全部放入同一个row容器，给每个内容块添加col-xs-12 col-sm-6 col-md-3类，实现移动端单块占满整行垂直排列、平板端一行两块、桌面端一行四块的排布逻辑
替换固定像素样式：将写死的大边距改为响应式配置，移动端下缩小内边距、移除不必要的固定上边距，同时适当缩小标题字号适配小屏阅读
适配绝对定位层：给文本容器设置宽度限制，小屏下调整偏移值，或改为相对定位避免和背景图错位
清理冗余代码：删除重复引入的Bootstrap CSS、多余的内联加粗样式

调整后的核心CSS

.CeroPadCeroMar {
  padding: 0;
  margin: 0;
}
/* 父级容器加相对定位，作为绝对定位子元素的偏移参考 */
#Industria > div {
  position: relative;
}
.texto-encimaAnalisis {
  position: absolute;
  top: 10%;
  left: 8%;
  width: 84%;
}
.TextoAnalisis {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 30px;
  color: #0F196C;
}
.TextoAnalisisDesc {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 15px;
  color: #616160;
}
/* 移动端适配 */
@media (max-width: 767px) {
  .texto-encimaAnalisis {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px;
  }
  .content-block {
    padding: 15px 10px !important;
    margin-top: 0 !important;
  }
  .TextoAnalisis {
    font-size: 22px;
  }
}

调整后的核心HTML结构

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="Industria" class="CeroPadCeroMar">
  <div class="col-xs-12 CeroPadCeroMar">
    <img src="../content/image-backgroud.png" class="img-responsive" alt="" width="100%" height="auto">
    <div class="texto-encimaAnalisis">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 content-block" style="padding-right: 107px;">
          <p class="TextoAnalisis">
            <b>Lorem ipsum amet. <br>dolor sit</b>
          </p>
          <p class="TextoAnalisisDesc">
            <b>Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.</b>
          </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 content-block" style="padding-right: 107px;">
          <p class="TextoAnalisis">
            <b>Lorem ipsum amet. <br>dolor sit</b>
          </p>
          <p class="TextoAnalisisDesc">
            <b>Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.</b>
          </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 content-block" style="padding-right: 107px;">
          <p class="TextoAnalisis">
            <b>Lorem ipsum amet. <br>dolor sit</b>
          </p>
          <p class="TextoAnalisisDesc">
            <b>Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.</b>
          </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 content-block" style="padding-right: 107px; margin-top: 50px;">
          <p class="TextoAnalisis">
            <b>Lorem ipsum amet. <br>dolor sit</b>
          </p>
          <p class="TextoAnalisisDesc">
            <b>Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.</b>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

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

Bootstrap开发中移动端如何实现div四区块布局

当前使用代码 #

CSS代码 #

HTML代码 #

问题 #

解决方案 #

调整后的核心CSS #

调整后的核心HTML结构 #