首页 > 解决方案 > 容器内的列的全宽背景 [Bootstrap 3]

问题描述

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

在此处输入图像描述

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

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

标签: htmlcsstwitter-bootstrap-3

解决方案


添加CSS:

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

推荐阅读