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>

但它搞砸了，并且自举脚手架被打破了。我怎样才能让它们一起工作？

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/

谷歌图表仪表板和bootstrap行结构

1 个答案: