1

I am using Twitter Bootstrap.

I need to show 12 calendars.

I want it to show 6 per row at most, and if the browser is too small, I want it to just move the excess down.

Is this possible with boostrap?

Thanks

4

2 回答 2

3

我相信您可以通过使用Grid System 中内置的 Boostraps和它的一些默认 css 类来达到预期的效果。

我创建了一个包含 12 个<asp:Calendar>对象的测试页面。我将这些日历中的每一个都放在<div class="row">一个<div class="span12">容器中。

现在所有日历都在 div 中分组，并且通过引导网格系统将 div 设置为流动的，容器将随着浏览器调整大小。现在我们要做的就是让日历在容器调整大小时开始向下移动。

为了做到这一点，我将内置添加到我的class="pull-left"每个<asp:calendar>对象中。

结果对我来说非常有效，可能会根据您的喜好工作。

这是我的测试代码。

<div class="row">
<div class="span12">
    <asp:Calendar ID="Calendar1" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar2" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar3" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar4" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar5" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar6" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar7" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar8" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar9" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar10" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar11" runat="server" CssClass="pull-left"></asp:Calendar>
    <asp:Calendar ID="Calendar12" runat="server" CssClass="pull-left"></asp:Calendar>
</div>

即使您不使用这些<asp:Calendar>对象，class="pull-left"也应该适用于您使用的任何日历。

要在日历之间添加一些间距，您可以创建自己的 css 类：

<style type="text/css">
    .CalendarMargin {
    margin-right:10px;
    margin-bottom:10px;
    }
</style>

然后将新类添加到<asp:Calendar>标签中，如下所示：

<asp:Calendar ID="Calendar1" runat="server" CssClass="pull-left CalendarMargin"></asp:Calendar>
于 2013-02-22T16:32:33.323 回答
3

是的，这是可能的。twitter boostrap 是基于 12 列的，它会随着屏幕大小的变化而自动向下折叠。只需将每个日历包装在<div span2>(12/6=2) 中，框架将为您处理其余的事情。

这些东西的引导文档非常好。请参阅脚手架系统以更好地了解网格系统的工作原理。

编辑：刚刚意识到我为帮助您而包含的 html/css 没有显示，因为我忘记用代码标签包装它。<div span2>是你需要的

于 2013-02-22T16:27:41.853 回答