如何在移动设备上堆叠全日历标题?

Question

我正在使用 fullcalendar.io，我的布局在台式电脑上看起来像这样：

June 2016                           [<][Today][>]
             My calendar is here

但是在移动设备上，它看起来像这样：

          June 2016                           
                      [<][Today][>]
             My calendar is here

或者：

            June 20[<][Today][>]
             My calendar is here

基本上我想要的是标题堆栈中的所有元素都以移动设备为中心。这可能吗？

Answer 1

没问题，只需将其添加到您的 CSS 中即可。您可能需要调整断点或将其添加到现有断点。

@media (max-width: 768px) {
    .fc-toolbar > div {
        float: left !important;
        width: 100%;
    }
}

移动设备将如下所示：

[Normally Left]
[Normally Center]
[Normally Right]
--------- Your Calendar ------------

自选：

如果你的选择器更具体，你可以去掉！important。例：

.calendar .fc-toolbar > div.fc-left, 
.calendar .fc-toolbar > div.fc-center, 
.calendar .fc-toolbar > div.fc-right {
    float: left !important;
    width: 100%;
}