复杂的 boostrtrap Grid（嵌套）答案

【问题标题】：Complex boostrtrap Grid (nesting)复杂的 boostrtrap Grid（嵌套）
【发布时间】：2017-05-15 21:58:19
【问题描述】：

我正在尝试弄清楚如何使用引导程序实现下面的布局。

到目前为止，这是我的代码。我没有找到将块放在第一个列下方的解决方案......

<body>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
        <div style="height: 905px; background-color: blue;"></div>
    </div>
    <div class="col-sm-6">
        <div style="margin-top: 200px; height: 305px; background-color: blue;"></div>
        <div class="row">
            <div class="col-sm-6">
                <div style="margin-top: 30px; height: 370px; background-color: blue;"></div>
            </div>
            <div class="col-sm-6">
                <div style="margin-top: 30px; height: 1000px; background-color: blue;"></div>
            </div>
        </div>
    </div>

  </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js">
</script></body>

想要的布局是：

【问题讨论】：

ups 我忘了放我的代码。在这里。
不能用简单的引导程序来完成。你有多个地方不能成为一行的一部分，你必须编写自定义 CSS
好的..这就是我的猜测..谢谢

标签： html css twitter-bootstrap grid

【解决方案1】：

在接下来的代码中，您可以看到布局。您必须知道 :before 样式只是为了向您展示它的外观。此示例不是响应式思维，如果您希望它在移动设备和平板设备上运行，您必须对其进行编辑。

还有一点就是第六个盒子是容器外的，如果屏幕有一点点，这个盒子就看不完整了。

我给所有盒子一个固定的高度来测试它，就像图片一样。

.container {
  max-width: 80%;
}

.container .red:before,
.container .red2:before {
  background-color: red;
  content: "";
  display: block;
  margin-bottom: 15px;
}

.container .red:nth-child(1):before {
  height: 200px;
}

.container .red:nth-child(2):before {
  margin-top: 30px;
}

.container .red2:before,
.container .red:nth-child(2):before,
.container .red:nth-child(5):before,
.container .red:nth-child(7):before {
  height: 80px;
}

.container .red:nth-child(3):before {
  height: 75px;
}

.container .red:nth-child(4):before {
  height: 265px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="col-xs-6 red"></div>
      <div class="col-xs-6 red"></div>
      <div class="col-xs-3 red"></div>
      <div class="col-xs-3 pull-right red"></div>
      <div class="col-xs-8 col-xs-offset-1 red"></div>
      <div class="col-xs-5">
        <div class="red2" style="margin-left: -20%;"></div>
      </div>
      <div class="col-xs-4 red"></div>
    </div>

【讨论】：

谢谢勒内！非常感谢您的帮助。