html - CSS：图表脱离容器

Question

我不确定这是从哪里控制的，您能指出我吗？我是 CSS 新手。

当您调整窗口大小时，图表会从容器中获取。你在 CSS 中哪里控制这个？我不需要调整图表的大小，至少只是隐藏它？那可能吗？

我正在使用 twitter 引导程序，这是生成的 HTML

  <div class='row-fluid'>
    <div class='span9'>
      <div class='box'>
        <div class='box-content padded' style='text-align: center'>
          <div id='graphs' style='width:860px; margin:0 auto;' title='test'>
            <div id='chart' style='display: inline-block;' title='test'></div>
          </div>
        </div>
      </div>
    </div>
    <div class='span3'>
      <div class='box'>
        <div class='box-content padded'>
          Hosts ...
        </div>
      </div>
      <div class='box'>
        <div class='box-content padded'>
          <b> Services ... </b>
          <br> .... </br>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

调整图表大小以适应父容器很容易；只需width:100%在图表上使用。因此，在您的代码中，替换此代码：

<div id='graphs' style='width:860px; margin:0 auto;' title='test'>

使用此代码：

<div id='graphs' style='width:100%; margin:0 auto;' title='test'>

所做的是将图形宽度设置为父元素的百分比，即divclass box-content padded。因此，如果我们将 设置width为100%，则图形始终与容器的大小匹配。