Bootstrap 4: Wie kann man sicherstellen, dass die obere feste Navbar im Container bleibt und nicht dehnt?

Question

Es tut mir leid für meine Frage kann dupliziert wird diese:
Bootstrap fixed navbar inside divoder dies:
Twitter Bootstrap: How to make top fixed navbar stay in container and not stretch?
oder viele ähnlich, aber drei Jahre vergangen, und Bootstrap hat fast aktualisiert es ist Version 2 -und zu 4-ten aber die Probleme bleiben immer noch gleich.
So suche ich nach einem eleganten und einfachen Weg, um feste Navbar in Eltern div.container zu bleiben.
Hier ist der Code ist, dass ich kopiert habe und verändert ein wenig, von der offiziellen Dokumentation:

<div class="container"> 
    <nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
     <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" 
      data-target="#navbarResponsive" aria-controls="navbarResponsive" 
      aria-expanded="false" aria-label="Toggle navigation"> 
     </button> 
     <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
      <a class="navbar-brand" href="#"> 
       <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar 
      </a> 
      <ul class="nav navbar-nav float-md-right"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home 
         <span class="sr-only">(current)</span> 
        </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

Answer 1

Vielen Dank für Ihre Antworten, aber ich habe endlich eine Antwort hier: Fixed position but relative to container
Diese benutzerdefinierte CSS wirklich hilfreich ist:

.container { 
padding: 0px; 
} 

nav.navbar { 
    width: inherit; 
    left: 50%; 
    transform: translateX(-50%); 
} 

Answer 2

Bearbeiten - Ich habe versehentlich eine Antwort Bootstrap-3 anstelle von Bootstrap 4.

<nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
    <div class="container"> 
     <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" 
      aria-expanded="false" aria-label="Toggle navigation"></button> 
     <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
      <a class="navbar-brand" href="#"><img src="favicon1.png" width="30" height="30" class="d-inline-block align-top" alt=""> Navbar</a> 
      <ul class="nav navbar-nav float-md-right"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<div class="container"> 
    <div class="next">Head</div> 
</div> 

Sie möchte den "Container" div in dein Nav setzen.

Answer 3

Dies ist ein wenig kompliziert war.

Neben der <div class="container"></div> innerhalb nav.navbar platzieren, ich hatte die folgende CSS zu verwenden, so dass die toggler und das Logo nicht auf Mobil hat überlappen:

@media (max-width: 767px) { 
    .navbar .container { 
     width: 100%; 
    } 
    } 

Mein navbar Code sieht wie folgt aus (allgemein) :

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 

     <a class="navbar-brand" href="{{ home_url('/') }}"> 
     <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> SITENAME 
     </a> 
    </div> 
    <div class="collapse navbar-collapse " id="navbarSupportedContent"> 
     <ul class="nav navbar-nav float-md-right"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home 
         <span class="sr-only">(current)</span> 
        </a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Mein navbar Code sieht wie folgt aus (Wordpress):

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
       data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
       aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <a class="navbar-brand" href="{{ home_url('/') }}"> 
      <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> 
      {{ get_bloginfo('name', 'display') }} 
     </a> 
     </div> 

     <div class="collapse navbar-collapse " id="navbarSupportedContent"> 

     @if (has_nav_menu('primary_navigation')) 
      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'nav navbar-nav mr-auto']) !!} 
     @endif 
     </div> 
    </div> 
    </nav> 

JSFIDDLE

Answer 4

ich die einfachste Lösung gefunden haben, ist die .navbar festSpitzenKlasse aus dem <nav> Element zu entfernen und an die <div class="container"> anwenden, die Ihre <nav> wickelt. Diese Lösung erfordert keine benutzerdefinierten CSS und funktioniert auf verschiedenen Geräten.

<div class="container fixed-top"> 
    <nav class="navbar navbar-light bg-faded">