1

Twitter Bootstrap を使用しています。

12 個のカレンダーを表示する必要があります。

1行あたり最大6つ表示したいのですが、ブラウザーが小さすぎる場合は、余分な部分を下に移動させたいだけです。

これはブーストラップで可能ですか？

ありがとう

4

2 に答える 2

3

グリッドシステムに組み込まれているBoostrapsとそのデフォルトのcssクラスのいくつかを利用することで、望ましい結果を達成できる可能性があると思います。

<asp:Calendar>12個のオブジェクトでテストページを作成しました。これらの各カレンダーを<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 ブーストラップは 12 列に基づいており、画面のサイズが変わると自動的に下に折りたたまれます。各カレンダーを (12/6=2) でラップするだけ<div span2>で、残りはフレームワークが処理します。

これらのブートストラップのドキュメントは非常に優れています。グリッド システムがどのように機能するかを理解するには、足場システムを参照してください。

編集:コードタグでラップするのを忘れたために、あなたを助けるために含めたhtml/cssが表示されないことに気付きました。<div span2>あなたが必要なものです

于 2013-02-22T16:27:41.853 に答える