Bootstrap 4 Beta Container füllen

Meine aktuelle Seite sieht wie folgt aus: https://i.imgur.com/Lnuf5sM.png Bootstrap 4 Beta Container füllen

ich einen div Container zwischen Top-navbar und der Fußzeile möchten. So dass der ganze grüne Inhalt ein div ist.

Weil ich eine zentrierte Box in der Mitte des grünen Inhalts möchte (Es wird ein Login-Formular sein). Die Sache ist, dass ich nicht weiß, wie ich das machen soll.

Wenn ich ein <div> unter meinem <nav>, das div hinter der navbar (es ist nicht sichtbar) erstellen.

Dies ist mein Code und CSS:

<!doctype html> 
<html lang="de"> 
<head> 
    <title>Login</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/style.css" /> 
</head> 
<body> 
<!-- Navigation --> 
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 
    <a class="navbar-brand" href="#">Navbar</a> 
</nav> 

<div class="container"> 
    <div class="row"> 
     <div class="col-sm"> 
     Test 
     </div> 
    </div> 
</div> 



<!-- Footer --> 
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark"> 
    <a class="navbar-brand mx-auto" href="#">Footer</a> 
</nav> 


<!-- Javascript always on bottom --> 
... 
</body>

Und das ist mein CSS

body 
{ 
    background-color: #417239 
}

Ich sehe nicht, den Behälter. Und im Entwicklermodus meines Browsers ist das div hier: https://i.imgur.com/m6kgVae.png

Warum ist es nicht unter der Navbar? Es sollte den gesamten grünen Inhalt ausfüllen (resizierbar). Und wie kann ich einen Block erstellen, der in der Mitte des grünen Inhalts ist? (Deshalb brauche ich ein "Haupt" div).

Quelle

2017-11-29 Luranis

Vergessen Sie nicht, um Windows zu aktivieren; D –

Bitte benutzen Sie nav-Tag versuchen Platzierung innerhalb der Container-Fluid-Klasse?. Fügen Sie dem Container den Rand so genau wie die Höhe der Navigationsleiste hinzu. – karthik

@ karthik ja. Ich habe auch versucht, nav + div + footer in ein main div mit Container-Klasse und Container-Fluid-Klasse zu legen. – Luranis

Da .fixed-top und .fixed-bottom Klasse, Ihre Inhalte verstecken sich hinter nav. Sie sollten Marge von oben festgelegt, Ihre Inhalte auf den sichtbaren Bereich zu verschieben:

#content { 
 
    margin: 100px auto; 
 
    text-align:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Navigation --> 
 
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
</nav> 
 

 
<div class="container" id="content"> 
 
    <div class="row"> 
 
     <div class="col-sm"> 
 
     Login Form 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<!-- Footer --> 
 
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark"> 
 
    <a class="navbar-brand mx-auto" href="#">Footer</a> 
 
</nav>

https://jsfiddle.net/wuzbj1w6/1/

Quelle

2017-11-29 14:02:11 kastriotcunaku

Vielen Dank für Ihre Antwort. Aber wie kann ich das div vollständig zentrieren? Es sollte auf Höhe und Gewicht zentriert werden, nicht nur zum Gewicht. Weil es jetzt mehr Ober und nicht komplett zentriert ist. – Luranis

https://i.imgur.com/G3E6mTj.png so sieht es jetzt mit Ihrem Code aus: '

\t \t \t

' – Luranis

@Luranis können Sie das nur tun, wenn Sie in diesem Fall feste Breite und Höhe des Login-Formulars haben Sie können diese CSS verwenden: https://jsfiddle.net/wuzbj1w6/2/ – kastriotcunaku

Auschecken https://v4-alpha.getbootstrap.com/examples/signin/. Das sollte dich in die richtige Richtung bringen.

Das div befindet sich unter Ihnen navbar, da Sie mit css etwas Polsterung für den Anfang Ihrer Seite hinzufügen müssen.

Quelle

2017-11-29 13:46:25 Taslack

Ja, aber warum wird es nicht einfach untergehen? (der Behälter div). Und das div muss alle verfügbaren Inhalte ausfüllen, damit es vollständig zentriert werden kann. Im Beispiel ist es nur die volle Breite. Aber es sollte auch volle Höhe sein (der Container div). Wie du siehst. Das Beispiel Anmeldeformular ist nicht vollständig zentriert (Höhe und Breite). Es ist höher. – Luranis

Da die Navigationsleiste schwebt und oben auf der Seite oder anderswo fixiert ist. Ihre Seite wird also nicht wissen, wie sie den oberen Rand nach unten korrigiert. Auschecken https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/ und lesen Sie https://getbootstrap.com/docs/4.0/components/navbar/ – Taslack

Wie für die vertikale Ausrichtung überprüfen Sie diese Antwort. https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment – Taslack

@Luranis Dies würde Ihnen helfen.Center richten Sie das div mit Bootstrap 4 Hilfsklassen aus.

<div className="container-fluid bg-dark"> 
     <div className="row h-100 justify-content-center align-items-center bgColor"> 
     <div className=" col-sm-6 col-md-6 col-lg-4 text-center"> 

      <form role="form"> 
       //form fields 
      </form> 
     </div> 
    </div> 
     </div>

Quelle

2017-11-29 13:58:27 karthik

@Luranis Haben Sie das versucht? – karthik

nein, ein anderer Typ hat auch eine gute Lösung gefunden, die ich zuerst ausprobiert habe. – Luranis

np.Ich bin froh, dass Sie die Lösung gefunden haben. – karthik

Bootstrap 4 Beta Container füllen

Antwort

test

Verwandte Themen