自定义3列模板[Bootstrap]

Question

在我的网站中，我有一个包含2列的引导网格模板，如下所示：

我想在col-sm-4下添加一个框/列，尊重响应式引导程序，如下图所示：

有可能吗？提前谢谢。

Answer 1

在Bootstrap列的网格系统中，只能用于划分行，但是你可以在一列中创建两行，如下所示

＆＃13;

＆＃13;

.block {
  background: gray;
  min-height: 100px;
  height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:100%">
  <div class="row">
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="block">
            A
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="block" style="background: red">
            B
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-8">
      <div class="block">
        C
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

也许这可以满足您的需求，但通常类似于在左栏中添加两个块元素