Question

我正在尝试使用引导网格系统复制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下添加另一2，然后对于Box 3我想我会增加高度以匹配其他列。

我正在尝试找到最佳方法，以实现这一目标的响应方式。

也，有人知道我如何完成此excel图表的副本吗？ chart.js是否可以与angularjs一起用于数据馈送？

谢谢！

Answer 1

像这样吗？

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

Answer 2

要细分容器，您可以再次插入row，然后再插入col-12，以获得完整的列：

    .col-sm-5{
       border:1px solid red;
       height:120px;

    }
    .col-sm-2{
        border:1px solid blue;
    }
    .col-sm-1{
        border:1px solid grey;
    }
    .col-sm-4{
        border:1px solid green;
    }
    .col-12{
        border:1px solid orange;
    }

    <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">
            <div class="row">
                <div class="col-12">
                    Box2 (A)
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    Box2 (B)
                </div>
            </div>
        </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>

引导程序-获取某些网格（列下方的列）

2 个答案: