Question

我试图弄清楚如何使用bootstrap实现下面的布局。

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

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

所需的布局是：

Answer 1

在下一个代码中，您可以看到布局。您必须知道：之前的样式只是为了向您展示它是如何看到的。这个例子没有思考响应，如果你想在移动和桌面设备上工作，你必须编辑它。

另一件事是第六个盒子是容器外面的，如果屏幕很少，这个盒子看不到完整。

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

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

复杂的boostrtrap网格（嵌套）

1 个答案: