如何使用 Bootstrap Flex 设置 CSS3 flex-basis 属性？答案

【问题标题】：How do I set CSS3 flex-basis property using Bootstrap Flex?如何使用 Bootstrap Flex 设置 CSS3 flex-basis 属性？
【发布时间】：2020-11-18 14:53:22
【问题描述】：

使用 CSS3 我可以像这样单独设置 flex 属性

.someclass {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;   
}

使用 Bootstrap (version >= 4.1) flex 好像只能设置flex-grow-X and flex-shrink-X，像这样

<div class="someclass flex-grow-1 flex-shrink-1">...</div>

有没有办法使用 bootstrap 4.1 设置弹性基础？

【问题讨论】：

取决于你想要做什么以及为什么。
你有所有的col-*来做这个。
@Paulie_D 这个问题更多的是出于兴趣，而不是具体问题。
class="col-12 px-0" 为您提供 flex-basis: 100% 并设置了一些其他宽度属性

标签： html css flexbox

【解决方案1】：

查看 Bootstrap v4.1 的 source code，没有包含专门针对 flex-basis 值的实用程序类。

搜索file，单词flex-basis只有12次出现：

对于某些col-* 类（例如line 625），将flex-basis 设置为0 5 次。
7 次用于样式特定的 navbar 相关类（例如 line 4268）。

在撰写本文时，最新版本的 Bootstrap 似乎仍然如此：

【讨论】：