Question

我正在尝试实现类似下图的图像，其中深蓝色和浅蓝色使用引导程序创建完整的网格。

淡蓝色的盒子应该一直延伸到它左边，深蓝色应该一直延伸到右边。但内容应保留在容器中并根据容器进行调整。

我的方法：

我在以下标记的帮助下实现了相同的目标：

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

带有容器的全宽容器流体，用于在twiiter-bootstrap中包装文本

1 个答案: