全宽容器流体与容器在 twitter-bootstrap 中包装文本

Question

我正在尝试实现类似于下图的效果，其中深蓝色和浅蓝色使用引导程序构成完整的网格。

浅蓝色框应一直延伸到左侧，深蓝色框应一直延伸到右侧。但是内容应该留在容器中，并根据容器进行调整。

jsFiddle

我的做法：

借助以下标记，我实现了同样的目标：

<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="scheduler-col">
                    <div class="title">
                        <img src="../img/calendar.png" alt="calendar icon">
                        <h3>Afspraken planner</h3>
                        <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p>
                        <a href="" class="btn btn-dark">maak een afspraak</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="scheduler-col">
                    <div class="title">
                        <img src="../img/calendar.png" alt="calendar icon">
                        <h3>Afspraken planner</h3>
                        <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p>
                        <a href="" class="btn btn-dark">maak een afspraak</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

所以，我将两列放在一个容器内的一行中。然后我将背景图像添加到始终定位中心。但我想通过向各个部分添加背景颜色而不是添加单个背景图像来做到这一点。

所以，如果有人可以建议一种方法来实现这种布局而不使用定位和背景图像。

CSS：

#wrapper {
    background: url(img/banner-bg.jpg) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-size: cover;
}

Answer 1

这可以使用伪元素（::before, ::after）轻松实现，而不会影响 Bootstrap 网格！它需要定位，但不需要定位到主要元素，而是定位到伪元素。

这是一个解决方案（在 SCSS 中）： http://codepen.io/hellojebus/pen/eZxOGG

#wrapper {
  overflow: hidden;
} 

.scheduler-col {
  position: relative;
  &:before {
    position: absolute;
    content: " ";
    top: 0;
    //a very large number for width
    width: 6000px;
    height: 100%;
  }
  &.is-left::before {
    //0 - the padding-left/right on bootstrap col
    right: -15px;
    background: #f1f1f1;
  } 
  &.is-right::before {
    //0 - the padding-left/right on bootstrap col
    left: -15px;
    background: #888;
  }
  .title {
    position: relative;
    z-index: 3;
  }
}