用Bootstrap佈局以保存日曆？

Question

我正在使用Twitter Bootstrap。

我需要顯示12個日曆。

我希望它最多顯示6行，如果瀏覽器太小，我希望它只是移動多餘的下降。

這是可能與推動？

謝謝

Answer 1

是的，這是可能的。 twitter boostrap基於12列，隨着屏幕大小的變化，它會自動向下塌陷。只需將每個日曆包裝在<div span2>（12/6 = 2）中，該框架將爲您處理剩下的問題。

這些東西的bootstrap文檔非常好。請參閱scaffolding system以更好地瞭解網格系統的工作原理。

編輯：剛纔意識到我包括的HTML/CSS沒有出現，因爲我忘了用代碼標籤包裝它。 <div span2>是你需要的東西

Answer 2

我相信你可以通過使用Boostraps built in Grid System和它的一些默認的css類來達到預期的效果。

我創建了一個包含12個<asp:Calendar>對象的測試頁。我將這些日曆中的每一個放在<div class="row">和<div class="span12">容器中。

現在，所有的日曆都分組在div中，並且divs被設置爲通過引導網格系統流動，容器將使用瀏覽器調整大小。現在我們所要做的就是讓容器重新調整大小時，日曆開始向下滑動。

爲了做到這一點，我添加了內置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>