Bootstrap 4中如何让flex元素仅小屏填充？原生类方案

嘿，这个问题我刚好碰到过！Bootstrap 4确实没有.flex-nofill这类反向类，但咱们完全可以利用它的移动优先断点机制和已有的flex工具类来实现需求，根本不用自定义CSS～

核心思路 #

Bootstrap的工具类是移动优先的：默认类（不带断点前缀）会作用于小于指定断点的设备，而带断点前缀的类（比如sm-）会作用于当前断点及以上的设备。咱们要的效果是「小于sm时填充，sm及以上不填充」，所以可以这么做：

• 给元素加默认的.flex-fill，让它在小于sm的设备上自动填充剩余空间；
• 再给元素加.flex-sm-initial，这个类会在sm及以上断点覆盖.flex-fill的样式——因为.flex-initial对应的是flex元素的默认行为：flex: 0 1 auto，不会自动填充剩余空间，正好抵消.flex-fill的flex: 1 1 auto效果。

示例代码 #

<div class="d-flex">
  <div class="flex-fill flex-sm-initial">我在手机（小于sm）上会填充剩余空间，平板及以上（sm+）正常显示</div>
  <div class="bg-light p-2">另一个flex元素</div>
</div>

另一种等价写法 #

如果觉得.flex-sm-initial不够直观，也可以单独控制flex-grow属性——毕竟.flex-fill的核心是flex-grow: 1，咱们在sm及以上把它改回0就行：

<div class="d-flex">
  <div class="flex-fill flex-sm-grow-0">和上面效果完全一样</div>
  <div class="bg-light p-2">另一个flex元素</div>
</div>

这两种方法都是纯原生Bootstrap类，完全符合你的需求～

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