容器内的列的全宽背景 [Bootstrap 3] [重复]

Question

基本上我在一个容器中有两列，我正在尝试将背景颜色添加到在容器外部扩展全宽的列。这是模拟。

如您所见，黄色背景内的内容位于列内的列内。如何设置背景颜色，使其向左全宽并适用于所有屏幕？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
   <div class="container">
      <div class="row">
         <div class="col-xs-12">
            <h2>
               Project Name
            </h2>
         </div>
      </div>
   </div>
</section>
<section class="spage-intro">
   <div class="container">
      <div class="row">
         <div class="col-sm-4">
            <h3 class="intro-excerpt">
               Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.
            </h3>
         </div>
         <div class="col-sm-8">
            <div class="the-content-wrapper">
               Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.
            </div>
         </div>
      </div>
   </div>
</section>

Answer 1

请按照以下步骤操作。如果有任何不清楚的地方请询问..

HTML

<div class="col-sm-4 with-bg"></div> 

css

.with-bg {
    position: static;
}
.with-bg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 35.33%;
    background-color: #f6cc08;
    z-index: -1;
}

Answer 2

添加css：

.intro-excerpt{
    background-color: #f6cc08;
}