如何使事件在Bootstrap日历中排列 [英] How to make events line up in Bootstrap Calendar

问题描述

使用Bootstrap日历时 http://bootstrap-calendar.azurewebsites.net/index -bs3.html 在周"视图中时，事件未排列.

When using Bootstrap Calendar http://bootstrap-calendar.azurewebsites.net/index-bs3.html the events don't line up when in the Week view.

例如，如果您有2个事件: -今天上午10时至11时 -明天上午10点至上午11点

For example if you have 2 events: - Today 10am to 11am - Tomorrow 10am to 11am

在周视图中，它们看起来像一个楼梯，一个楼梯，下面的下一个楼梯...没有排列.

In the week view, they look like a staircase, one, the next one below... not lined up.

感谢

我已经尝试过不同的时间，等等.文档有限，我不确定如何解决此问题.

I already tried different times, etc.. documentation is limited and I am not sure how to fix this.

推荐答案

事件未排成一行，因为它们被包裹在div中，并且具有以下类:

The events don't line up because they are wrapped in a div witht he following class:

.cal-row-fluid {
    width: 100%;
}

这将导致div扩展到其父级宽度.

This causes the div to stretch as wide as its parent is.

一种解决方法是将一个事件的内容放到另一个事件的父项中.像这样:

A sollution would be to place the contents of one event into the parent of the other. Like this:

<div class="cal-row-fluid">
    <div class="cal-cell1 cal-offset4 day-highlight dh-event-success" data-event-class="event-success">
        <a href="http://www.example.com/" data-event-id="297" class="cal-event-week event297">This is success event</a>
    </div>
        <div class="cal-cell1 cal-offset4 day-highlight dh-event-success" data-event-class="event-success">
    <a href="http://www.example.com/" data-event-id="276" class="cal-event-week event276">Short day event</a>
    </div>
</div>

这篇关于如何使事件在Bootstrap日历中排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！