React-big-calendar bootstrap 4.0 alpha 布局丑陋

Question

我使用的是 bootstrap 4.0 alpha，没有其他样式。布局非常丑陋，日历只显示一列而不是 table。知道为什么以及如何做吗？

我从网站上注意到以下内容，但我不知道该怎么办：

note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).

这是我的渲染代码：

    render() {
    return (
        <div className="container">
            <TaskSearchBar
                search={this.onSearch}
            />
            <BigCalendar
                selectable
                events={[]}
                defaultView='week'
                scrollToTime={new Date(1970, 1, 1, 6)}
                defaultDate={new Date(2015, 3, 12)}
                onSelectEvent={event => alert(event.title)}
                onSelectSlot={(slotInfo) => alert(
                    `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
                    `\nend: ${slotInfo.end.toLocaleString()}`
                )}
            />
            <TaskList
                queryUrl={this.state.queryUrl}
            />
        </div>
    );
}

这是排版结果

Answer 1

我发现我错过了这一行：

require('react-big-calendar/lib/css/react-big-calendar.css');

感谢

Answer 2

如果您仍然运行遇到任何问题，您复制的代码段表示包含 BigCalendar 的元素需要设置特定的高度，例如 420px 或 60%。这将防止 flexbox 算法贪婪地吃 space。如果您不这样做，您会发现日视图每隔一小时一次呈现一次，而不是提供可滚动的 window.

React-big-calendar bootstrap 4.0 alpha 布局丑陋

React-big-calendar with bootstrap 4.0 alpha layout ugly

css

twitter-bootstrap

reactjs

bootstrap-4

react-big-calendar