Bootstrap - Style jumbotron éléments

Je suis en train de créer simple site web mobile pour les événements de calendrier.

Voici la version de base de l'informatique: http://orhancanceylan.com/test/v2/event.html

Le problème ici est; violet backgrounded zones sont seulement couvrir les textes. Mais je veux qu'ils s'adapter à la largeur de la jumbotron image de la maquette ci-dessous.

Bootstrap - Style jumbotron éléments

J'ai essayé d'ajouter le code ci-dessous:

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

Cependant il est encore seulement couvre le contenu du texte.

Comment dois-je régler ce problème?

Merci,

InformationsquelleAutor CanCeylan | 2014-05-12
  1. 7

    Lorsque vous êtes en utilisant le bootstrap cadre, vous aurez à modifier certaines propriétés de classes standard. Je recommande uniquement à l'aide de la grille pour éviter l'impérieuse. Si vous ne voulez pas d'obtenir le fixe avec vous pouvez utiliser le conteneur de liquide de classe. J'ai travaillé sur un violon pour résoudre votre problème. Notez que j'ai remplacé la valeur par défaut bootstrapp css, que je ne recommande pas, mais il peut vous aider pour l'instant. J'espère que cette aide.

    Conteneur de fluide: bootstrap conteneur de fluide

    Violon: Allora - fix css

    Html adaptations:

    <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 adaptations:

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