Bootstrap响应式适配问题：平板端布局优化需求

嘿，我来帮你解决这个布局困扰！你现在的核心问题是只给大屏幕（lg断点）设置了布局规则，平板端完全没做适配，所以才会右侧空出一大块，还没法让两个div按要求上下居中排列。下面给你具体的调整方案：

第一步：优化外层容器的响应式适配 #

你原来的外层col-lg-11 col-lg-offset-1只在大屏幕生效，平板端会默认占满整行，但内部元素没跟上，导致布局失衡。先给外层补上平板端的适配类：

<div class="row">
  <!-- 大屏幕保持你原有的布局，平板端改成更紧凑的居中容器 -->
  <div class="col-lg-11 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-12">

这里col-md-10 col-md-offset-1能让平板端的容器宽度更合理，避免过宽导致右侧空白；要是你觉得还不够居中，换成col-md-8 col-md-offset-2也行，根据实际视觉需求调整就行。

第二步：调整内部两个div，实现居中+上下排列 #

要让第一个div在平板端居中，第二个乖乖待在它正下方，给每个内部div加上平板端的栅格类即可：

<!-- 第一个div：大屏幕占3列，平板端占8列居中，移动端占满整行 -->
  <div class="col-lg-3 col-md-8 col-md-offset-2 col-sm-12 mob-padding">
    <form method="post" class="bottom-form">
      <input class="bottom-imput bg-blue" type="email" name="email" placeholder="example@mail.com">
      <br>
      <input class="bottom-btn" type="submit" value="Submit">
    </form>
  </div>

  <!-- 第二个div：和平板端第一个div保持相同宽度与居中，再加个间距避免紧贴 -->
  <div class="col-lg-3 col-md-8 col-md-offset-2 col-sm-12 mob-padding mt-3">
    <!-- 这里放第二个div的内容 -->
  </div>

• col-md-8 col-md-offset-2：让平板端的div宽度占8列，左右各偏移2列，刚好实现居中效果；
• col-sm-12：到了移动端直接占满整行，保证小屏幕的适配性；
• mt-3（Bootstrap 4及以上版本适用）：给第二个div加个顶部间距，和第一个div分开，视觉上更舒服。

更简洁的方案（Bootstrap 4+专属） #

要是你用的是Bootstrap 4或更新版本，直接用mx-auto类就能替代offset，代码更清爽：

<div class="row">
  <div class="col-lg-11 col-lg-offset-1 col-md-10 mx-auto">
    <div class="col-lg-3 col-md-8 mx-auto mob-padding">
      <!-- 第一个div的内容 -->
    </div>
    <div class="col-lg-3 col-md-8 mx-auto mob-padding mt-3">
      <!-- 第二个div的内容 -->
    </div>
  </div>
</div>

mx-auto会自动计算左右margin，帮你实现水平居中，比手动写offset灵活多了。

最后提醒几个关键点 #

• 确认你的Bootstrap版本对应得上这些类（Bootstrap 3和4+的栅格逻辑略有不同，但核心响应式类通用）；
• 记得在平板断点（大概768px-991px之间）测试，微调列宽（比如换成col-md-6）直到布局完全符合预期；
• 删掉不必要的外层偏移类，不然容易导致额外的空白哦。

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