Question

我在使用fullcalendar.js的项目中使用自适应样式。不幸的是，在移动视图中，我无法将标题的样式（fc-header-left，fc-header-center，fc-header-right）相互堆叠。例如......在桌面视图中它看起来像...... fc-header-left fc-header-center fc-header-right

移动时，我希望标题的3个部分叠加在一起。 FC-头左 FC-头中心 FC-头右

我试图用负边距，浮点数和各种各样的东西覆盖这些标题，但我无法将这些标题叠加到其中。

有谁知道如何在移动视图中让标题部分相互堆叠？

谢谢

Answer 1

为每个人提供width:100%;和display:block;应该做的伎俩。至少我能够在tec fullcalendar.js网站上获得演示版本。然后，您必须根据需要对齐它们。

.fc-header-left, fc-header-center, fc-header-right {
    width: 100%;
    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

我正在使用的版本使用flexbox。这就是对我有用的东西，

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

Answer 4

对于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;
    }
}

FullCalendar.js调整移动标头

4 个答案: