layout - 谷歌图表仪表板和 Bootstrap 行结构

Question

我将一些 Google 图表放入 Bootstrap 主题中。我正在使用 Chart dashboard使用这样的结构:

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

靴带使用这样的结构，将两个元素并排放置:

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

我如何将这两者混合在一起，以便最终在 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>

但它变得一团糟， Bootstrap 脚手架也坏了。我怎样才能让他们一起工作？

Answer 1

我能够通过以下标记让它正常工作。

<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>

fiddle :http://jsfiddle.net/Jeff_Meadows/V8psC/