Bootstrap：调整窗口时如何保持列的垂直与水平间距

嘿，这个问题其实是因为你对Bootstrap栅格系统的嵌套用法有点小误解，再加上固定宽度的设置导致的。我来帮你梳理下问题所在，然后给出修复方案：

问题根源分析 #

• 错误的列嵌套方式：Bootstrap的栅格要求所有列（.col-*）必须放在行（.row）里面，你直接在.col-sm-4里嵌套.col-xs-12，会导致默认的栅格padding冲突，而且达不到你想要的间距效果。
• 固定宽度限制：你给.home_box_left和.home_box_right设置了width: 300px，当窗口宽度缩小到小于这个值时，容器就会溢出，甚至和旁边的列重叠。
• 错误的间距实现思路：靠嵌套列来做间距不是Bootstrap的正确用法，应该利用栅格的内置间距工具，或者自定义margin/padding来实现。

修复方案（适配Bootstrap 3写法） #

下面是修改后的代码，我会标注关键修改点：

修改后的HTML

<header id="home"> 
  <div class="container-fluid"> 
    <div class="row center-block home_boxes_row"> 
      <!-- 左侧列 -->
      <div class="col-sm-4"> 
        <div class="home_box_left"> 
          <p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p> 
        </div> 
      </div> 
      <!-- 右侧列 -->
      <div class="col-sm-4"> 
        <div class="home_box_right"></div> 
      </div> 
      <!-- 空列占位 -->
      <div class="col-sm-4"> 
      </div> 
    </div> 
  </div> 
</header>

修改后的CSS

#home { 
  height: 1100px; 
  background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg"); 
  background-size: cover; 
  width: 100%; 

  .home_boxes_row { 
    margin-top: 200px;
    /* 可选：抵消列的默认padding，让内容对齐容器边缘 */
    margin-left: -15px;
    margin-right: -15px;

    .home_box_left { 
      /* 替换固定宽度，小屏幕自动适应父列宽度 */
      max-width: 300px;
      width: 100%;
      height: 300px; 
      background-color: $green; 
      padding: 5px;
      /* 右侧添加margin实现列间距 */
      margin-right: auto;
    } 

    .home_box_right { 
      max-width: 300px;
      width: 100%;
      height: 300px; 
      background-color: $blue; 
      padding: 5px;
      /* 左侧添加margin实现列间距 */
      margin-left: auto;
    } 
  } 
}

关键修改说明 #

1. 移除嵌套的.col-xs-12：把内容放在普通div里，避免栅格系统的padding冲突，同时让内容容器可以自由控制间距。
2. 替换固定宽度为max-width + width:100%：大屏幕上容器最大为300px，小屏幕自动适应父列宽度，不会出现溢出或重叠。
3. 用margin实现列间距：通过margin-right: auto和margin-left: auto让盒子在父列内居中，同时保持间距；你也可以直接用margin: 0 10px来设置固定间距，按需调整即可。
4. 可选：调整行的margin：Bootstrap的.row默认有左右负margin，用来抵消列的padding，如果你需要内容对齐容器边缘，可以保留这个设置。

另一种原生Bootstrap实现方式（栅格间距） #

如果你想完全用Bootstrap栅格实现，也可以调整列的宽度，用空列做间距，比如把两个内容列改成.col-sm-3，中间加一个.col-sm-2的空列：

<div class="row center-block home_boxes_row"> 
  <div class="col-sm-3"> 
    <div class="home_box_left"> 
      <p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p> 
    </div> 
  </div> 
  <!-- 中间空列做间距 -->
  <div class="col-sm-2"></div>
  <div class="col-sm-3"> 
    <div class="home_box_right"></div> 
  </div> 
  <div class="col-sm-4"> 
  </div> 
</div>

这种方式完全靠栅格系统控制宽度和间距，响应式调整时会自动按比例收缩，不会出现重叠问题。

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