Bootstrap - 造型jumbotron元素

Question

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

以下是它的基本版本：http://orhancanceylan.com/test/v2/event.html

这里的问题是;紫色背景区域仅覆盖文本。但是我希望它们能够像下面的模型一样适应jumbotron图像的整个宽度。

我尝试添加以下代码：

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

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

我该如何解决这个问题？

谢谢，

Answer 1

当您使用引导程序框架时，您必须覆盖标准类的某些属性。我建议只使用网格来避免重写。如果您不想修复，可以使用容器 - 流体类。我找到了解决问题的小提琴。请注意，我已经覆盖了我不推荐的默认bootstrapp css，但它现在可以帮到你了。我希望这会有所帮助。

容器液：bootstrap container fluid

小提琴：Allora - fix 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> 

Css改编：

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