Bootstrap 4 Navbar überlappend auf Handy

Ich mache ein Projekt in der Schule und ich benutze Bootstrap 4 und ich bin ziemlich neu dazu.Bootstrap 4 Navbar überlappend auf Handy

Ich habe meine Navbar-Marke als Bild in der Mitte der Navbar zentriert. Aber wenn ich zu einem kleineren Bildschirm umschalte, werden einige Navigationselemente unter der Navigationsleiste nach unten bewegt. Und das schafft auch einen Raum zwischen dem Karussell und der Navbar.

Ich vermute, dass es wegen der "absoluten" Position der Navbar Markenbild ist.

Hier ist ein Jsfiddle: jsfiddle (dot) net/zdu9jv99/3/Ich weiß nicht, warum es nicht funktioniert ..... (Ich kann nicht mehr als zwei Links, deshalb Ich muss das tun (Punkt).)

So sieht es auf kleineren Displays aus. Image that shows the overlapping So soll es aussehen. This is how it looks on bigger screens Hier ist meine HTML und CSS:

<!DOCTYPE html> 
<html lang="sv"> 

<head> 
    <title>Barber Shop</title> 
    <meta charset="utf-8"> 
    <!-- Icon --> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <!-- Bootstrap Core CSS --> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
    <!-- Font-Awesome Core CSS --> 
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
    <!-- Custom CSS --> 
    <link rel="stylesheet" href="assets/css/style.css"> 
</head> 

<body> 
    <header> 
     <!-- Navigation --> 
     <nav class="navbar navbar-dark bg-inverse navbar-static-top navbar-full" style="background-color: #d8c387 !important;"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <ul class="nav navbar-nav"> 
          <li class="nav-item"><a class="nav-link" href="index.html"><i class="fa fa-home icon-padding" aria-hidden="true"></i>Hem</a></li> 
          <li class="nav-item"><a class="nav-link" href="hittafrisor.html"><i class="fa fa-map-marker icon-padding" aria-hidden="true"></i>Hitta frisör</a></li> 
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-picture-o icon-padding" aria-hidden="true"></i>Galleri</a></li> 
         </ul> 
        </div> 
        <div class="col-md-2"> 
         <div class="navbar-brand"> 
          <a class="white-circle" href="index.html"> 
           <img class="img-fluid" src="assets/images/barber-logo.png" alt="Logo"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-6"> 

         <ul class="nav navbar-nav float-md-right"> 
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-info icon-padding" aria-hidden="true"></i>Om oss</a></li> 
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-phone icon-padding" aria-hidden="true"></i>Kontakt</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </nav> 
    </header> 
    <main>

css:

/* NAVBAR */ 
.navbar { 
    height: 58px; 
    z-index: 2 !important; 
} 

.navbar-brand { 
    display: inline-block; 
    float: none; 
    padding: 0; 
    margin: 0 !important; 
    overflow: visible; 
} 

.navbar-brand img { 
    z-index: 3 !important; 
} 

.navbar-brand .white-circle { 
    display: block; 
    width: 161px; 
    height: 10px; 
    border-radius: 50%; 
    position: absolute; 
} 

.navbar { 
    text-align: center; 
} 

.nav-link { 
    color: #741833 !important; 
} 

/* NAVBAR FONT SIZE */ 
.nav a{ 
    font-size: 17px; 
}

ich das Projekt auch als Website hochgeladen haben, wenn man sich die ganze Sache zu suchen. Wenn Sie irgendwelche anderen Meinungen oder etwas anderes haben, fühlen Sie sich frei, die Kritik mich, ich bin sicher, dass ich noch einige Fehler gemacht habe. Die Seite ist cpt-keyhole.se (ja, ich kenne einen seltsamen Namen)

Es ist wahrscheinlich nur eine einfache Sache, die ich verpasst oder missverstanden habe, daher würde ich mich über Ihre Hilfe freuen. Vielen Dank für Ihre Zeit!

Quelle

2017-01-07 AskGoogle

Bitte fügen Sie dies zu https://jsfiddle.net/ hinzu, damit wir Ihren Code leicht bearbeiten können ... – DokiCRO

Sie sollten die Navigationsleiste in einem minimierten Menü hinzufügen, wenn Sie kleine Auflösungen haben. – KujAslani

Einer der Links von den linken Menüs ist wegen des begrenzten Platzes in seinem Eltern-Div.

Sie müssen sich auf mobile Geräte Breite der linken Navigationslinks erhöhen wie:

@media screen and (max-width: 480px) { 
.leftMenus 
    { 
    width:300px; 
    } 
}

Quelle

2017-01-07 16:03:55

Hier ist der Code, der mit aktuellen Monitorgröße arbeitet, max-width:768px für iPad und max-width:414px für iPhone 6 Plus:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Navbar Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <script src="https://use.fontawesome.com/97755550d3.js"></script> 
    <style> 
     img.logo-img{ 
      width:150px; 
      height:150px; 
      border-radius:50%; 
      position:absolute; 
      left:50%; 
      /* bring your own prefixes */ 
      transform: translate(-50%, -10%); 
     } 


     .navbar-default .navbar-nav > li > a { 
      color:#741833; 
      font-size:20px; 
     } 

     .navbar-default .navbar-nav > li > a >i{ 
      margin-right:10px; 
     } 

     li.left-menu{ 
      position:absolute; 
      right:5%; 
     } 
     li.left-menu1{ 
      position:absolute; 
      right:13%; 
     } 

     @media only screen and (max-device-width: 768px) and (orientation:portrait){ 
      img.logo-img{ 
       width:100px; 
       height:100px; 
       border-radius:50%; 
       position:absolute; 
       top:10px; 
       left:50%; 
       /* bring your own prefixes */ 
       transform: translate(-50%, -10%); 
      } 

      .navbar-default .navbar-nav > li > a { 
       color:#741833; 
       font-size:16px; 
      } 

      .navbar-default .navbar-nav > li > a >i{ 
       margin-right:5px; 
      } 

      .spl-container{ 
       padding:0; 
      } 

      .navbar-brand{ 
       padding:0; 
      } 

      li.left-menu{ 
       position:absolute; 
       right:5%; 
      } 
      li.left-menu1{ 
       position:absolute; 
       right:17%; 
      } 
     } 

     @media only screen and (max-device-width: 414px) and (orientation:portrait){ 
      img.logo-img{ 
       width:80px; 
       height:80px; 
       border-radius:50%; 
       position:absolute; 
       top:10px; 
       left:50%; 
       /* bring your own prefixes */ 
       transform: translate(-50%, -10%); 
      } 

      .navbar-default .navbar-nav > li > a { 
       color:#741833; 
       font-size:16px; 
       margin-left:10px; 
      } 

      li.left-menu{ 
       position:relative; 
       left:5px; 
      } 
      li.left-menu1{ 
       position:relative; 
       left:5px; 
      } 

      li.first-menu{ 
       margin-top:60px; 
      } 

      .navbar-toggle{ 
       position:absolute; 
       right:0; 
      } 
     } 

    </style> 
</head> 
<body> 
    <nav class="navbar navbar-default" style="background-color:#d8c387;"> 
     <div class="container-fluid spl-container"> 
      <div class="navbar-brand"> 
       <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#"> 
        <img src="download.png" alt="logo" class="logo-img" /> 
       </a> 
      </div> 

      <div class="collapse navbar-collapse" id="navbar"> 
       <ul class="nav navbar-nav"> 
        <li class="first-menu"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Hem</a></li> 
        <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>Hitta Frisor</a></li> 
        <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Galleri</a></li> 
        <li class="left-menu"><a href="#"><i class="fa fa-info" aria-hidden="true"></i>Om oss</a></li> 
        <li class="left-menu1"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Kontakt</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</body> 
</html>

Quelle

2017-01-07 16:49:02

Vielen Dank für Ihre Antwort, aber dieses Beispiel ist für Bootstrap 3. – AskGoogle

Bootstrap 4 Navbar überlappend auf Handy

Antwort

Verwandte Themen