web-dev-qa-db-fra.com

Bootstrap Jumbotron ne devenant pas toute la largeur du corps

Bonjour, j'essaie de régler mon Jumbotron sur toute la largeur de l’écran, mais il a besoin d’un 15px padding-left, padding-right. Si je supprime le remplissage, la barre de défilement horizontale apparaît avec un 30px right margin. J'utilise la version par défaut de Bootstrap version 3.0.3 et par défaut de VS2013. Selon ce link j'ai enlevé le Jumbotron en dehors de tout .container ma page est comme ça

<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>

///////////////////////////////////////////////////////

body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover; 
}

Edit: Firefox + Chrome + IE10 résultats === | ====================

Des idées sur la façon de réparer la mise en page? Je n'ai pas touché le CSS Bootstrap que j'ai mis à jour avec Nuget.

htmlcsstwitter-bootstraptwitter-bootstrap-3
10
Flood Gravemind

Salut les gars, la solution était simple voici comment je le divise

    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
    <div> <===================this Div wrapping jumbotron
    <div class="jumbotron specialjum">
    <div class="over container body-content">
    ....page headers and other stuff
    </div>
    </div>
    <p class="just container body-content">
    ... body text
    </p>
    </div>
    </body>

Aucun changement à aucune partie du CSS. Je ne sais pas pourquoi ça marche, mais ça marche.

4
Flood Gravemind

Juste pour partager mon expérience après la création d'une application Web MVC dans Visual Studio 2013, je ne pouvais pas obtenir le jumbotron pour étirer la largeur de l'écran, peu importe ce que j'ai fait. J'ai finalement trouvé qu'elle était bloquée par une balise ** par défaut corps-contenu du conteneur sur la page Views/Shared/_Layout.cshtml. Après avoir enlevé la balise, elle s’affiche correctement. J'espère que cela aidera n'importe qui avec une situation similaire à la mienne.

 Code

 Before

 After

6
snapper

Si vous essayez simplement de supprimer le remplissage, vous voudrez alors mettre padding:0; dans votre .specialjum et vous assurer que la feuille de style personnalisée est appelée après bootstrap. Sinon, ajoutez padding:0!important; s'il doit être appelé auparavant. Répétez également cette opération pour margin-right: et ajoutez width:100%; si elle ne s'étend pas à la largeur de la page, ce qui, à mon avis, devrait déjà l'être.

Voir this jsFiddle

2
jmalais

Pour toute autre personne susceptible de se retrouver ici, j'ai une solution alternative. J'ai rencontré ce problème, mais je ne pouvais tout simplement pas sortir mon Jumbotron de son contenant. Ce que j’ai fait, c’est simplement emballé dans un <div class="row"></div>. Je suis toujours en train d’apprendre le bootstrap, donc je ne sais pas si cela posera problème, mais pour l’instant, cela fonctionne assez bien.

1
Peavey2787

Afin de rendre le jumbotron pleine largeur et sans angles arrondis, placez-le en dehors de tous les conteneurs. Et ajoutez plutôt un.

1
Eldiyar Talantbek

Changer la largeur de .container à 100%:

container { width: 100% }
0
Mohammed Raja