html - 带有图形背景的 Bootstrap 全宽部分

Question

我正在尝试实现我的图形设计师的设计，虽然看起来很酷但让我有些头疼，因为我不知道如何在 Bootstrap 中实现。

我们有一个号召性用语部分，它与左右两端的 12 列网格系统对齐。

它还延伸到视口(viewport)边缘:

1. 在左侧，红色背景一直延伸到视口(viewport)边缘。
2. 在右侧，我们有一个灰色背景图像，一直延伸到视口(viewport)边缘。

我无法找到我想要实现的目标的搜索词，更不用说从哪里开始了(除了让 cta 在整个宽度上使用背景，然后在顶部覆盖一个左侧元素)。

关于如何在 Bootstrap 中编写以下图形布局的任何想法？

<section class="cta" style="background: grey; position: relative">
    <div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
    <div class="text-outer">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">left</div>
                <div class="col-xs-6">right</div>               
            </div>
        </div>
    </div>      
</section>

Answer 1

使用 <div class="container-fluid">作为起点；我在猜测您的页面布局。让我们试试这个:

见下文:

.cntn {
  border: 1px red solid;  /* you can remove this (not needed) */
}
.red {
  background-color: red;
  text-align: right;
  margin: 0;   /* optional */
  width: 100px; /* adjust to suit your needs */
  float: left;
}
.cta {
  margin: 0;  /* optional */
  float: right;
  border: 1px solid green;  /* you can remove this (not needed) */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- make container fluid -->
<div class="container-fluid">
  <div class="row">
    <!-- heading area: hexagon -->
    <div class="red">
      <img src="http://placehold.it/100/100" />
    </div>

    <!-- heading area: call-to-action -->
    <section class="cta">
      Action
    </section>
  </div>
  <div class="row cntn">
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
  </div>

</div>