Bootstrap 4列换行问题：右侧列布局复制失败求助

嘿，这个Bootstrap列换行的问题我之前踩过好几次坑！咱们一步步来排查：

首先，最容易忽略的点：你有没有把所有的col-md-2列都放在.row容器里？ Bootstrap的.row自带负margin，用来抵消容器的padding，同时让列之间的间距（gutter）正常工作。如果没套.row，列的总宽度很容易因为容器的padding加上列的宽度超过100%，最后就会挤换行。

正确的结构应该是这样的：

<div class="container"> <!-- 或者container-fluid -->
  <div class="row">
    <div class="col-xs-12 col-md-2">
      <!-- 你的card内容 -->
    </div>
    <!-- 剩下的5个col-md-2 -->
  </div>
</div>

如果已经套了.row，那接下来检查这几个点：

• 有没有给列或者内部的card加额外的margin？ 比如你自定义了.card { margin: 0 10px; }，这会让每个列的实际宽度变成2/12的容器宽度 + 20px，6个加起来肯定超100%，直接换行。这种情况可以用Bootstrap自带的mx-0类去掉左右margin，或者调整自定义样式的优先级。
• 盒子模型是不是被改了？ Bootstrap默认全局是box-sizing: border-box，也就是padding和border都算在元素宽度里。如果你的样式里把这个改成了content-box，那列的padding会额外占宽度，导致总宽度超标。可以在你的CSS里加一句：

.col-md-2, .card {
  box-sizing: border-box;
}

• 列里的内容是不是溢出了？ 比如blockquote里的文字太长，没有自动换行，硬生生把列撑宽了。可以给.card加个overflow-hidden，或者调整文字的换行规则：

.card-blockquote p {
  word-wrap: break-word;
}

另外，别忘了col-xs-12是在小屏幕（<768px）下占满一行，所以如果是手机上看到最后两个换行，那是正常的；如果是在md及以上屏幕（≥768px）出现这个问题，就按上面的方法排查。

给你一个完整的可运行示例参考：

<div class="container">
  <div class="row">
    <!-- 一共6个col-md-2，刚好填满12列网格 -->
    <div class="col-xs-12 col-md-2">
      <div class="card card-body">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="col-xs-12 col-md-2">
      <div class="card card-body">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="col-xs-12 col-md-2">
      <div class="card card-body">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="col-xs-12 col-md-2">
      <div class="card card-body">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="col-xs-12 col-md-2">
      <div class="card card-body">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="col-xs-12 col-md-2">
      <div class="card card-body">
        <blockquote class="card-blockquote">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

先试试套.row，这应该是最常见的问题！如果还不行，再检查margin和盒子模型，应该就能解决啦。

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