更改 Bootstrap Offcanvas 大小（通过 CSS）（Bootstrap 5.2）

我想更改一些 bootstrap offcanvas 元素的大小。 （不是全部！） （要更改所有内容，我知道我可以更改 SASS 变量 ($offcanvas-horizo​​ntal-width: 400px)）

我想以一种可以将不同的 CSS 类添加到 offcanvas 的方式来完成这项工作（就像带有 .modal-xl 的模态）。 IE。这里例如.offcanvas-size-l 和 .offcanvas-size-xl 当然，offcanvas 也应该保持响应能力（即对于较窄的屏幕，不要超过 100vw。（即使用最大宽度/媒体查询）。

不幸的是，这仅在宽度规范的情况下是不可行的，因为除了宽度之外，引导程序还具有相应的负边距，这会将画布“移出屏幕”，即这是必须调整的几个值。

由于我通过 Sass“编译”引导程序本身，因此我有更多选项，并且可以在 (s)css 任何部件/SASS 函数之前和之后插入。 （或编辑引导源） 有人能够做到这一点吗？

我不需要 5.2 中新增的“responsive-offcanvas”功能（offcanvas-xl）/an 做一些完全不同的事情。

示例代码（直接来自引导页面，仅添加“offcanvas-size-xl”）

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

最后它比我想象的要容易，还有一个你可以影响的 CSS 变量（mit SASS）：

.offcanvas-size-xl {
    --#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
    --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
    --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
    --#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}

对于那些不编译 bootstrap 的人来说，他们应该能够这样做：

.offcanvas-size-xl {
    --bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
    --bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
    --bs-offcanvas-width: min(95vw, 250px) !important;
}