Question

我使用Bootstrap来构建仪表板，但我对Bootstrap很新，我在下面的图片中遇到了最终网格布局的问题。问题是当我添加第4列（表）时，它将垂直容纳比左侧其他3列（Widgets）更多的数据，正在按下此行图中的底行内容（图表）。它看起来很简单，我想它与“colspan”有关。或者＆＃39; rowspan＆＃39;功能，但我无法弄清楚。

为什么我的图表会像这样被推下来，我该如何解决？

Answer 1

你必须筑巢才能实现这一目标。

例如：

<div class="container"
  <div class="row">
    <div class="col-md-9 not-right-table-content">
      <!--nest content here, it's like a new grid-->
      <div class="row">
        <div class="col-md-4">
          widget 1
        </div>
        <div class="col-md-4">
          widget 2
        </div>
        <div class="col-md-4">
          widget 3
        </div>
        <div class="col-md-12">
          chart
        </div>
        <div class="col-md-12">
          other content
        </div>
      </div>
    </div>
    <div class="col-md-3">
      right table html here
    </div>
  </div>
</div>

Answer 2

@Nuno - 在＆＃34; HTML Code Snippet＆＃34; 下方使用或查看我的 JS Fiddle （您可能需要滚动边界以扩展结果窗格。）

<div class="container">
<div class="row">
    <div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
            <div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
            <div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
            <div class="col-lg-12 col-md-12 col-sm-12">chart</div>
            <div class="col-lg-12 col-md-12 col-sm-12">other content</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>

您可以使用以下资源来了解有关bootstrap的更多信息：

大型垂直柱推下其他网格元素

2 个答案: