ブートストラップ4 navbar over mobile on mobile

私は学校でプロジェクトを作っています。私はBootstrap 4を使用しています。ブートストラップ4 navbar over mobile on mobile

私はnavbarの真ん中にイメージを置いて私のnavbarブランドを持っています。しかし、私が小さな画面に切り替えると、navbar項目のいくつかがnavbarの下に移動します。また、カルーセルとnavbarの間にもスペースができます。

私はそれがnavbarブランドイメージの「絶対的な」位置のためであると考えます。

jsfiddle：jsfiddle（dot）net/zdu9jv99/3 /なぜ完全には動作しないのか分かりません..... （2つ以上のリンクを投稿できません私は（ドット）をしなければならない。）

これは小さなディスプレイで見えるものです。 Image that shows the overlapping これはどのように見えますか。 This is how it looks on bigger screens は、ここに私のHTMLと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; 
}

私はまた、サイトとプロジェクトをアップロードしています。あなたが他の意見を持っていたり、私が批判を解放したと感じたら、私はいくつかの間違いを犯したと確信しています。サイトはcpt-keyhole.seです（奇妙な名前を知っています）

これはたぶん簡単なことですが、私が見逃したり誤解したりしているので、助けていただければ幸いです。御時間ありがとうございます！

出典

2017-01-07 AskGoogle

これをhttps://jsfiddle.net/に追加して、コードを簡単に編集することができます。 – DokiCRO

小さな解像度では、折りたたみメニューにナビゲーションバーを追加する必要があります。 – KujAslani

親のdivのスペースが限られているため、左メニューからのリンクの1つがドロップダウンしています。あなたが好きなモバイルデバイス上の左側のナビゲーションリンクの幅が増加する必要が

：ここ

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

出典

2017-01-07 16:03:55

は、現在のモニターサイズで動作するコードは、iPhone 6 PlusのiPad用max-width:768pxとmax-width:414pxです：

<!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>

出典

2017-01-07 16:49:02

あなたの返信ありがとうが、この例はブートストラップ3です。 – AskGoogle

ブートストラップ4 navbar over mobile on mobile

答えて

関連する問題