wake-up-neo.net

Bootstrap Jumbotron wird nicht zur vollen Breite des Körpers

Hallo, ich versuche, mein Jumbotron auf die volle Breite des Bildschirms einzustellen, aber irgendwie braucht es einen 15px padding-left, padding-right. Wenn ich die Auffüllung entferne, erscheint die horizontale Bildlaufleiste mit einem 30px right margin. Ich verwende die Standard-Bootstrap-Version 3.0.3 und das Standardlayout VS2013. Gemäß diesem link habe ich den Jumbotron außerhalb des .container entfernt, meine Seite sieht so aus

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

Bearbeiten: Firefox + Chrome + IE10-Ergebnisse === | =============== ===

Irgendwelche Ideen, wie man das Layout fixiert? Ich habe das Bootstrap-CSS nicht berührt, das ich mit Nuget aktualisiert habe.

10
Flood Gravemind

Hallo Leute, die Lösung war einfach, so div ich es

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

Keine Änderungen an irgendeinem Teil des CSS. Weiß nicht, warum es funktioniert, aber es funktioniert einfach.

4
Flood Gravemind

Um meine Erfahrungen nach dem Erstellen einer MVC-Webanwendung in Visual Studio 2013 zu teilen, konnte ich das Jumbotron nicht dazu bringen, die Breite des Bildschirms zu strecken, egal was ich tat. Ich stellte schließlich fest, dass es auf der Seite Views/Shared/_Layout.cshtml durch ein standardmäßiges ** Container-Inhaltstag blockiert wurde. Nach dem Entfernen des Tags wurde es korrekt angezeigt. Ich hoffe, das hilft jedem, der eine ähnliche Situation hat wie ich.

 Code

 Before

 After

6
snapper

Wenn Sie nur versuchen, die Auffüllung zu entfernen, sollten Sie padding:0; in Ihren .specialjum einfügen und sicherstellen, dass das benutzerdefinierte Stylesheet nach dem Bootstrap aufgerufen wird. Andernfalls fügen Sie padding:0!important; hinzu, wenn es zuvor aufgerufen werden muss. Wiederholen Sie diesen Vorgang auch für margin-right: und fügen Sie width:100%; hinzu, wenn er sich nicht auf die Breite der Seite erstreckt, die meiner Meinung nach bereits vorhanden sein sollte.

Siehe this jsFiddle

2
jmalais

Für alle anderen, die hier enden könnten, habe ich eine alternative Lösung. Ich bin auf dieses Problem gestoßen, aber ich konnte meinen Jumbotron einfach nicht außerhalb des Containers mitnehmen. Was ich getan habe, ist es einfach in einen <div class="row"></div>. Einzuwickeln. Ich lerne immer noch Bootstrap, daher weiß ich nicht, ob dies Probleme verursachen wird, aber für den Moment funktioniert es ziemlich gut.

1
Peavey2787

Um das Jumbotron in voller Breite und ohne abgerundete Ecken zu gestalten, platzieren Sie es außerhalb aller .container und fügen Sie stattdessen einen .container in.

1

Ändern Sie die Breite von .container in 100%:

container { width: 100% }
0
Mohammed Raja