Css 引导-设计jumbotron元素的样式

我正在尝试为日历事件创建简单的移动网站

以下是最基本的版本：

这里的问题是；紫色背景区域仅用于覆盖文本。但我想让它们适合jumbotron图像的全宽，就像下面的模型一样

我尝试添加以下代码：

.jumbotron row,
.jumbotron .row { 
  color: #efefef;
  background-color: rgba(157,52,99,0.7);
  width: 100%;
}

然而，它仍然只涵盖文本内容

我应该如何解决这个问题

---

谢谢，

当您使用引导框架时，必须重写标准类的一些属性。我建议只使用网格来避免覆盖。如果您不想使用修复，可以使用容器流体类。我想出了一个办法来解决你的问题。请注意，我已经覆盖了默认的引导css，我不建议这样做，但它现在可以帮助您。我希望这有帮助

容器液体：

小提琴：

Html改编：

<div class="jumbotron">
<h1>Pampalarla Alis Veris Qeyff</h1>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-4">
      <h3><span class="glyphicon glyphicon-time"></span></h3>
      <h4> Thursday 12:30</h4>
    </div>
    <div class="col-xs-4">
      <h3><span class="glyphicon glyphicon-map-marker icon-white"></span></h3>
      <h4> Kanyon</h4>
    </div>
    <div class="col-xs-4">
      <h3><span class="glyphicon glyphicon-user"></span></h3>
      <h4>6 People</h4>
    </div>
   </div>
  </div>
 </div> 

.jumbotron{
    position: relative;
    padding:0 !important;
    margin-top:70px !important;
    background: #eee;
    margin-top: 23px;
    text-align:center;
    margin-bottom: 0 !important;
}
.container-fluid{
    padding:0 !important;
}
.col-xs-4{
    background:rgba(157,52,99,0.7);    
}