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

Question

我将一些谷歌图表放在引导主题中。我正在使用使用如下结构的图表仪表板：

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

bootstrap 使用这样的结构，将两个项目并排放置：

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

但它搞砸了，引导脚手架坏了。我怎样才能让他们一起工作？

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>

小提琴：http: //jsfiddle.net/Jeff_Meadows/V8psC/