Bootstrap 4 .Behälter Klasse scheint Hamburger Menü zu verursachen, Markenlogo auf dem Handy

Question

Derzeit beschäftigt Aufbau meiner Website mit Bootstrap 4.

vermag ich nicht lösen zu überlappen, warum der Hamburger Menü die Markenlogo überlappt, wenn die Website sehen auf meinem Handy.

Es scheint durch die .container Klasse verursacht werden.

So sieht es aus: Menu overlaps brand image.

Ich habe versucht, das Logo mit usw. zu verstecken, aber das löst das Problem nicht.

Irgendwelche Ideen oder Richtlinien, wie ich das lösen könnte?

Hier ist ein Teil des Codes:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <nav class="navbar navbar-toggleable-md navbar-inverse sticky-top"> 
 
     <div class="container"> 
 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
       <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#home"><img src="img/A-los-wit.png" width="50" height="36" alt="Mini logo home"></a> 
 
      <div class="collapse navbar-collapse" id="navbarNav"> 
 
       <ul class="navbar-nav"> 
 
        <li class="nav-item"> 
 
         <a class="nav-link scroll" href="#home">Home<span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link scroll" href="#portfolio">Portfolio</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link scroll" href="#diensten">Diensten</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a class="nav-link scroll" href="#contact">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
    <!-- End Navigation -->

Answer 1

Dies ist ein bekanntes Problem in Bootstrap 4 Alpha 6:

https://github.com/twbs/bootstrap/pull/21722

Eine Abhilfe (bis zur Beta) ist das:

@media (max-width: 568px) { 
    .container { 
     margin-left: 0; 
     margin-right: 0; 
    } 
} 

http://www.codeply.com/go/pc0pufiqbW