小编mko*_*urs的帖子

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

我想以一种可以将不同的 CSS 类添加到 offcanvas 的方式来完成这项工作（就像带有 .modal-xl 的模态）。即这里例如 .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>

我想为全日历的每个事件添加一个 html 对象。（在我的例子中是 bootstrap-pill，但任何其他 html 也会失败。）我已经在 fullcalender 3.x 的其他项目中管理了这个。但在 5.x 中这完全有可能。

第一个想法：我将 html 放在事件源的事件标题中。这会失败，因为 fullcalendar 将标题添加为文本而不是 html。（也适用于旧版本的 FC）

第二：通过挂钩 eventContent 添加此内容：

    eventContent: function (args, createElement) {
          const icon = args.event._def.extendedProps.img;
          const text = "<span>test</span> "; 
          console.info("EventContent:",args.event);
          return {
            html: text
          };
    },

但最终，每个事件的标题只有“测试”。原来的标题消失了。

下一步尝试：

    eventContent: function (args, createElement) {
          const icon = args.event._def.extendedProps.img;
          const text = "<span>test</span> " + args.event._def.title;
          console.info("EventContent:",args.event);
          return {
            html: text
          };
    },

现在显示“测试”和标题。但标题的格式与以前不同（悬垂在外边缘等），因此标题丢失了格式。当然，可能可以解决一个视图的问题。但由于我使用多个视图，这对于任何视图和案例都是不可能的。

下一步尝试：

eventContent: function (args, prepend) {
... same as above ...

也不起作用。 …