html - 带容器的全宽容器流体在 twitter-bootstrap 中包装文本

Question

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

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

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