html - Bootstrap - 获取特定网格(列下列)

我正在尝试使用 Bootstrap 网格系统复制在 Excel 中制作的网格。到目前为止我设法得到的是:

 .col-sm-5{
        border:1px solid red;
       height:20%;

    }
    .col-sm-2{
        border:1px solid blue;
    }
    .col-sm-1{
        border:1px solid grey;
    }
    .col-sm-4{
        border:1px solid green;
    }

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-5">Graph</div>
        <div class="col-sm-2">Box1</div>

        <div class="col-sm-2">Box2</div>
        <div class="col-sm-2">Box3</div>
        <div class="col-sm-1">Box4</div> <!-- will be empty -->
    </div>
    <div class="row">
        <div class="col-sm-4">Graph Extra 1</div>
        <div class="col-sm-4">Graph Extra 2</div>
        <div class="col-sm-4">Graph Extra 3</div>
    </div>
</div>
</body>

我要复制的布局是这样的:

layout

基本上，我尝试使用 <div class="w-100"></div>但从我看到的结果来看，这可能不是我想要的，因为它将所有内容都移到了新的一行上。

所以我想在 Box 1 下添加另一列，在 Box 2 下添加另一列，然后对于 box 3 我想我会增加高度以匹配其他列。

我正在努力寻找最好的方式，响应式的方式来完成这个。

另外，有谁知道我怎样才能完成这个 excel 图表的复制品？ chart.js 会与 angularjs 一起用于数据馈送吗？

谢谢!

最佳答案

是这样的吗？

[class^='col-sm'] {
  border: 1px solid #ccc;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-5">
        BOX GRAPH
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-12">
                BOX 1
              </div>
              <div class="col-sm-12">
                BOX 2
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-12">
                BOX 1
              </div>
              <div class="col-sm-12">
                BOX 2
              </div>
              <div class="col-sm-12">
                BOX 3
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-1">
        LIKE BOX
      </div>
      <!-- will be empty -->
    </div>
    <div class="row">
      <div class="col-sm-4">Graph Extra 1</div>
      <div class="col-sm-4">Graph Extra 2</div>
      <div class="col-sm-4">Graph Extra 3</div>
    </div>
  </div>
</body>

关于html - Bootstrap - 获取特定网格(列下列)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52591745/

html - Bootstrap - 获取特定网格(列下列)

上一篇：Javascript src 问题

下一篇：javascript - jQuery 删除多个样式