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，但它现在可以帮助你。 我希望这有帮助。

容器液： 自助容器液

小提琴： Allora - 修复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);    
}