Bootstrap 4全宽网格问题：如何让列始终占满容器宽度？

嘿，这个问题我之前也帮不少开发者解决过——Bootstrap 4的网格系统默认就是这样的：当你给列指定了固定宽度（比如col-md-9），它就只会占你设定的那部分宽度，不会自动填满剩下的空间。下面给你几个实用的解决办法：

方法一：用自适应列类替换固定宽度列类 #

把指定宽度的col-md-9改成不带数字的col-md，这样这个列会自动填充容器的剩余空间，哪怕row里只有这一列：

<div class="container">
  <div class="row">
    <div class="col-md second"></div>
  </div>
</div>

原理是：col-md属于Bootstrap的自适应列，它会根据row里的列数量自动分配可用空间，当只有一列时就会占满整个row的宽度。

方法二：借助Flex布局辅助类 #

如果因为某些需求必须保留col-md-9的固定宽度设置，可以给这个列加上flex-grow-1类，让它在flex容器（row）里自动填满剩余空间：

<div class="container">
  <div class="row">
    <div class="col-md-9 flex-grow-1 second"></div>
  </div>
</div>

Bootstrap 4的row是基于Flexbox实现的，flex-grow-1属性会让元素占据容器内所有可用的剩余空间，完美解决单列不撑满的问题。

方法三：使用全宽列类（无响应式断点） #

如果不需要针对不同屏幕尺寸做宽度调整，直接用col类就可以，它在所有屏幕尺寸下都会自动占满row的宽度：

<div class="container">
  <div class="row">
    <div class="col second"></div>
  </div>
</div>

补充说明 #

为什么原来的col-md-9不行？因为Bootstrap的网格是12列布局，col-md-9就只占9/12的宽度，剩下的3/12空间会留空，所以列会左对齐，不会自动填满。只有当你使用不指定具体宽度的列类，或者用Flex辅助类让它“生长”，才能实现占满全宽的效果。

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