2

ブートストラップテーマ内にいくつかのGoogleチャートを配置しています。次のような構造を使用するチャートダッシュボードを使用しています。

<div id="dashboard">
        <div id="control1"></div>
        <div id="chart1"></div>
</div>

ブートストラップはこのような構造を使用して、2つのアイテムを並べて配置します。

<div class="row-fluid">
        <div class="span3"></div>
        <div class="span9"></div>
</div>

これら2つをどのように組み合わせると、span3内のチャートとspan9内のチャートを制御できるようになりますか？これまでの私の最良の結果はこれです：

<div class="row-fluid">
<div id="dashboard" >
        <div id="control1" class="span3" style="width: 25%; height: 400px;"></div>
        <div id="chart1" class="span9" style="width: 73%; height: 400px;"></div>
</div>
</div>

しかし、％幅を取り除き、より単純な構造にしたいのです。私はこれをテストしました：

<div id="dashboard" class="row-fluid >
        <div id="control1" class="span3"></div>
        <div id="chart1" class="span9"></div>
</div>

しかし、それは台無しになり、ブートストラップの足場が壊れています。どうすればそれらを一緒に機能させることができますか？

4

1 に答える 1

3

次のマークアップで問題なく動作させることができました。

<div class="row-fluid">
    <div id="dashboard">
        <div class="span4" style="font-size: 0.9em;">
            <div id="control1"></div>
        </div>
        <div class="span8">
            <div id="chart1"></div>
        </div>
    </div>
</div>

フィドル: http://jsfiddle.net/Jeff_Meadows/V8psC/

于 2013-02-14T21:03:17.667 に答える