FullCalendar.js为移动设备调整标题

Question

我在一个使用fullcalendar.js的项目中使用响应样式。不幸的是，在移动视图中，我无法使标题的样式（fc标题左、fc标题中、fc标题右）相互叠加。例如在桌面视图中，它看起来像。。。fc收割台左侧fc收割台中心fc收割台右侧

当移动时，我希望标头的3个部分堆叠在一起。fc收割台左侧fc收割台中心fc收割台右侧

我试着用负边距、浮动和各种各样的东西来覆盖这些标头，但我无法将这些标头堆叠起来。

有人知道我如何在移动视图中使标题部分相互堆叠吗？

感谢

Answer 1

对于Fullcalendar v5

@media (max-width: 767.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        display: block;
        text-align: center;
    }
    .fc-header-toolbar .fc-toolbar-chunk {
        display: block;
    }
}

Answer 2

这对我的最新版本有效。使用屏幕宽度进行检查。

@media (max-width: 768px){
    .fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
        display: inline-block;
        float: none !important;
    }
}

Answer 3

给他们每人一个width:100%;和display:block;。至少我能够在fullcalendar.js网站上获得演示。然后，您必须根据自己的意愿将它们对齐。

.fc-header-left, fc-header-center, fc-header-right {
    width: 100%;
    display: block;
}

Answer 4

我正在使用的版本使用flexbox。，这就是对我有效的方法

.fc-toolbar {
    .fc-center h2 {
        font-size: 1.25em
    }
    display: block;
    text-align: center;
    @media (min-width: 600px) {
        display: flex;
    }
}