Vue Bootstrap 流体容器错误断点答案

【问题标题】：Vue Bootstrap fluid container wrong breakpointsVue Bootstrap 流体容器错误断点
【发布时间】：2020-07-25 19:52:15
【问题描述】：

我需要一个容器，以便在断点（最大宽度）之前占用 100% 的可用宽度。在阅读official docs 之后，响应式流体容器似乎是一个完美的选择。

响应式容器是 Bootstrap v4.4 中的新功能。它们允许您指定一个 100% 宽（流体）的容器，直到达到特定断点，此时应用最大宽度。

Breakpoints table from official docs 这表示 md 断点最大为 720px。但这种行为在现实中是不同的。在测试过程中我发现，如果视口大于 992px，container-md max-width 设置为 960px。

<b-container fluid="md">reproduced Codepen

我没有正确理解文档吗？是否有具有上述功能的组件？

【问题讨论】：

容器的左右边距为 15px。您可以使用 px-0 类删除此填充，或者仅在 md screend 上删除它并使用 px-md-0 类删除它
@TroyMorehouse 不会改变帖子中描述的行为
这里是官方 Bootstrap v4.4.1 文档的链接：getbootstrap.com/docs/4.4/layout/overview/#responsive BootstrapVue 使用 Bootstrap V4.4.1 SCSS（通常是默认断点，除非您自定义了 SCSS/CSS）github.com/twbs/bootstrap/blob/v4-dev/scss/_grid.scss
@TroyMorehouse 再一次，我看不出它是如何回答我的问题的。我唯一想到的是 boostrap container-{} 和 vue-boostrap fluid={} 的行为方式相同（通过检查 css 规则也可以证明这一点，请参见初始帖子中的屏幕截图），但 vue-boostrap 文档的措辞具有误导性.相比之下，引导程序不仅明确地说“例如，.container-sm 的宽度为 100%，直到到达 sm 断点，它将随着 md、lg 和 xl 向上扩展。” .但也提供了一个表，其中表示了这种行为，这与 vue-bootstrap 表不同。
见bootstrap-vue.js.org/docs/components/layout#grid-options 注意我已经发布了 cmets 而不是答案。如果我完全回答，我会在下面发布答案。 ;)

【解决方案1】：

各种断点的容器最大宽度（假设默认 SCSS 变量）列在 https://bootstrap-vue.js.org/docs/components/layout#grid-options 的布局文档中

【讨论】：

【解决方案2】：

确保在 custom.scss 中添加了 @import "~bootstrap/scss/bootstrap"; https://bootstrap-vue.org/docs#using-custom-bootstrap-scss

这对我有用。

 <b-container :fluid="'md'">
</b-container>

在检查元素中应该是 class="container-md"

【讨论】：