Bootstrap jumbotron volle Breite und Höhe der Fenster mit hintergrund-Bild

Ich habe eine bootstrap-jumbotron auf einer website, und ich Frage mich, wie ich es machen würde, die ganze Breite und Höhe des Bildschirms, oder zumindest berühren, die nav-bar, da gibt es eine Lücke zwischen den jumbotron und der navbar.

So weit, ich habe einen "container" - Klasse in der "jumbotron" - Klasse zu machen, die volle Breite des Bildschirms, ohne abgerundete Ecken, aber wie hätte ich es, so wäre es die volle Breite und Höhe des Geräts Fenster , bis jemand scrollt?

Bisher dies ist, was ich habe:

<div class="jumbotron">
    <div class="container">
    <center><h1>Hello, World!</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula mauris, iaculis quis tortor eget, ultricies mollis nisi. 
        </p>
        <a class="btn btn-default" href="#">Button 1</a>
        <!-- <a class="btn btn-info" href="#">Button 2</a> -->
    </center>
    </div>
</div>

InformationsquelleAutor Hp123 | 2015-07-29

  1. 46

    So haben wir 3 Fragen hier:

    Entfernen Sie überschüssige Raum unter navbar

    Den default-bootstrap navbar hat eine margin-bottom: 20px Sie überschreiben möchten, wie diese:

    .navbar {
    margin-bottom: 0px;
}

    Machen jumbotron in voller Breite

    Bootstrap-Dokumentation sagt:

    Machen die jumbotron in voller Breite und ohne abgerundete Ecken, Platz
    es außerhalb aller .Behälter und stattdessen hinzufügen .- container innerhalb von.

    Also im Grunde:

    <div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

    Machen jumbotron in voller Höhe

    Ich bin mir nicht sicher wie sauber das passt in Ihr Projekt, aber Sie können versuchen, so etwas wie:

    .jumbotron{
    height: 100vh;
}

    *Ein gut-zu-wissen: Die vh steht für viewport height

    InformationsquelleAutor MrHaze

  2. 4

    Können Sie erreichen dies, indem Sie die jumbotron, direkt unter der Navigationsleiste. Sollten Sie mit dem jumbotron in einem container oder div, mit seiner Klasse:

    <div class="container-full-bg">

    Verwendung von "full-bg' erhöhen Sie die Breite der jumbotron in die Seite eingepasst. Damit erhöhen Sie die Höhe, die ich verwendet, den text innerhalb der container-Klasse oder einfach verwendet <br> - tags zur Erhöhung der jumbotron Höhe entsprechend pro meine Bedürfnisse. Ein Beispiel:

    <div class="container-full-bg">  <!--  increased the jumbotron width -->
        <div class="jumbotron ">
            <div class="container">
              <br><br><br>
              <p> Write here <p>
              <br><br><br><br>
            </div>
        </div>
</div>

    Nun, um das Bild korrekt in der jumbotron, verwenden Sie die hintergrund-Größe als Decke,anpassen der css-Datei:

    .jumbotron{
    background-image: url(show-copy.jpg) ;
    background-size: cover; 
    height: 100%;
    width: 100%;
}

    Hoffe, das hilft 🙂

    InformationsquelleAutor Swapnil Sourabh

  3. 1
    <div class="jumbotron" style="height:100vh;"></div>

    Dies sollte Ihnen eine volle Breite und die volle Höhe jumbotron

    InformationsquelleAutor Srikanth Gopi

  4. -1

    Gibt es eine Reihe von Möglichkeiten, das zu erreichen, was Sie versuchen, hier. Ich weiß, dieser thread ist ein wenig alt, aber....

    <div class="jumbotron jumbotron-fluid">

    machen würde, die jumbotron in voller Breite.

    Das löst nicht das problem
    Dies ist nicht eine gültige Lösung.jumbotron-Flüssigkeit macht es in voller Breite und nicht in voller Höhe, wie die Frage fragt nach.

    InformationsquelleAutor Mike Grote

Schreibe einen Kommentar