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

然而，它仅涵盖了文本内容。

我应该如何解决这个问题？

谢谢。

- CanCeylan

Answer 1

当您使用Bootstrap框架时，您需要覆盖一些标准类的属性。我建议仅使用网格以避免覆盖。如果您不想获得固定宽度，可以使用container-fluid类。我已经解决了您的问题，并提供了一个fiddle。请注意，我已经覆盖了默认的Bootstrap CSS，我不建议这样做，但现在可以帮助您。希望这可以帮到您。

容器流体：Bootstrap容器流体 Fiddle：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);    
}

- Jorn