Bootstrap Nav Fixed-Top & Layout-Probleme

Question

Ich arbeite an einem Mock-up, aber weiterhin Probleme mit der Navbar und Hauptinhaltslayout. Die Seite muss wie das unten abgebildete Modell auf dem Desktop aussehen.

Ich habe alles versucht, was ich denken kann und auf der Bootstrap-Site lesen, aber weiterhin in Probleme laufen.

Zuerst sollte die Navbar repariert werden, damit sie mit Ihnen scrollt. Ich habe von einer ihrer Vorlagen kopiert, aber es scrollt nicht wie die Demo, wenn ich sie nicht nach rechts ziehe. Aber wenn ich Pull-Right verwende, werden der obere Abstand und der erste Containerabstand entfernt. Ich habe versucht, die Body-Tag-Padding-Top, aber alles, was es tut, ist mehr Platz zwischen dem Nav-und Hauptcontainer nicht über dem Nav.

Das andere Problem ist das Zeilen- und Spaltenlayout in Desktop. Das col-md-8 stimmt nicht mit dem anderen col-md-4 überein. Es sieht gut aus in Mobile mit 320 Wide.

Ich ziehe meine Haare und bin mir nicht sicher, was repariert werden muss. Wenn jemand Zeit hat und einen Blick darauf werfen kann, würde ich es sehr schätzen.

Live-Links zu den Dateien sind unten.

link to image mockup
link to live webpage mockup
link to css override

Answer 1

Alles scheint nun behoben zu werden. Vielleicht war das größte Problem, das ich hatte, um die Navbar in den richtigen Standorten sowohl Desktop & Mobile. Ursprünglich verwendete ich einen Override für .nav, um den Rand zu modifizieren, um die Platzierung auf dem Desktop zu bekommen, aber in der mobilen Ansicht würde er sich in einer anderen Position befinden, ganz zu schweigen davon, dass er die Randverhältnisse von 80px oben und 120px richtig teilt . Dies würde dazu führen, dass das umgeschaltete Menü um 80px weiter nach unten verschoben wird, eher um 0px. Ich konnte nicht anders herum denken, also dachte ich mir, warum sollte ich nicht einfach ein Div-Tag nur für den Randabstand hinzufügen. Anscheinend schien das nach dem Hinzufügen neuer Informationen in die Medienanfragen zu funktionieren. Außerdem wurde ein Abstandsproblem behoben, wenn die Breite des Tabletts mit Nav- und Heldenbild geändert wurde.

Für den Rest des Layouts habe ich col-md-3 und col-md-7 verwendet, die ziemlich viel alles bis auf einige Polsterungen aufgereiht hat. Alles andere wie h1 und h3 Ich habe eine einfache Klasse für Handy benutzt, um die Ränder wieder anzupassen.

Wenn es einen einfacheren Weg oder eine effizientere Art der Codierung gibt, bin ich offen für Vorschläge, wenn jemand welche hat. Updated Live Link

Answer 2

1. Auf Ihrem CSS überschreiben haben Sie das Attribut .navbar (position: relative;) Dies über navbar feste Top-Eigenschaft.
2. So weit wie Ihre Col-Md-4 geht .. Sie haben es in einem HTML-Deskriptor eingewickelt .. was ist das: <!-- -->. Dies gibt nur Beschreibungen, welches HTML-Attribut aufgeführt ist. Diese Deskriptoren sind in vielen Ihrer tatsächlichen HTML-Code und müssen entfernt werden, damit der Code ordnungsgemäß funktioniert. Denken Sie daran, obwohl einige von ihnen tatsächlich Deskriptoren sind ... wie <!--fixed navbar-->

Answer 3

hii habe gerade überprüft Ihre Live-Website alle Probleme ist die Art, wie Sie div-Tags verwenden .. so für den ersten Abschnitt des Bildes und Navigationsleiste es in sein sollte ein div-Tag

<div class="col-md-12"> 
<div class="col-md-12"> 
<div class="col-md-4">IMAGE</div> 
<div class="col-md-8">your nav bar </div> 
</div> 
<div class="col-md-12"> 
Banner 
</div> 
<div class="col-md-12"> 
<div class="col-md-4"> 
HR MARUTIS STUFF 
</DIV> 
<div class="col-md-8"> 
HI LOUREM THINGY 
</div> 
</div> 

und soo auf HOPE DIESE Hilfe in Ihrer Formatierung SEITE