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