Bootstrap 4: Hvordan får man den øverste faste navbar til at blive i containeren og ikke strække sig?

Der er mange måder at få en fast navbar til at forblive inde i en forældres divcontainer. Vi gennemgår den mest enkle her.

Forestil dig, at du har følgende kode, ændret lidt fra Bootstrap-dokumenterne:

Navbar  
    

     
 Home (current) 
     
 Link 
     
 Link 
    
 hello 

div.next { background-color: lightblue; width: 100%; height: 60rem; }

Og din side ser sådan ud:

Løsninger

Mens dokumenterne læser "Navbars og deres indhold er flydende som standard. Brug valgfrie beholdere til at begrænse deres vandrette bredde," er den nemmeste løsning at bruge CSS til at indstille bredden på navbar direkte:

div.next { background-color: lightblue; width: 100%; height: 60rem; } .container { padding: 0px; } nav.navbar { width: inherit; top: 0%; left: 50%; transform: translateX(-50%); }

Ved at tilføje regler målrette .containerog nav.navbar, din navbar er nu den samme bredde som forældrenes beholder: