Html Navbarメニューモバイル

私のnavbarは私が望むように動作しません。ブラウザをモバイル画面サイズにリサイズしてボタンをクリックすると、リンクがロゴの右側に表示されます。私は多くのウェブサイトを見てきましたが、答えは見つかりませんでした。Html Navbarメニューモバイル

マイコード：

あなたはplnkr参照 .navbar-header

のクラスとdivの中にあなたのロゴとトグルをラップする必要が

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Timmage</title> 
     <meta charset="Utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/styles.css" rel="stylesheet"> 
    </head> 
    <body> 

     <div class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <a href="index.html" class="navbar-brand"><img class="logga" src="images/Timmage.png" alt="logga"></a> 
       <button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="collapse navbar-collapse navHeaderCollapse"> 
        <ul class="nav navbar-nav navbar-left"> 
         <li class="dropdown"> 
          <a href = "#" class="dropdown-toggle" data-toggle = "dropdown">Menu<b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href = "#">Profile</a></li> 
           <li><a href = "#">Uploads</a></li> 
           <li><a href = "#">Setting</a></li> 
           <li><a href = "#">Log out</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Settings</a></li> 
         <li><a href="#">My Profile</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <h1>Welcome to Timmage!</h1> 
     <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src = "js/bootstrap.js"></script> 

    </body> 
</html>

出典

2016-04-13 Marcus Lönnqvist

あなたがしたいですかそれらは現れる？ –

からhttps://plnkr.co/edit/sb7vJ5mMDMpO2VMPmelL?p=preview

<div class="container"> 
    <div class="navbar-header"> 
    <a href="index.html" class="navbar-brand"> 
    <img class="logga" src="images/Timmage.png" alt="logga" /> 
    </a> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button>  
    </div> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu                <b class="caret"></b> 
      </a> 
     <ul class="dropdown-menu"> 
      <li> 
      <a href="#">Profile</a> 
      </li> 
      <li> 
      <a href="#">Uploads</a> 
      </li> 
      <li> 
      <a href="#">Setting</a> 
      </li> 
      <li> 
      <a href="#">Log out</a> 
      </li> 
     </ul> 
     </li> 
     <li> 
     <a href="#">Settings</a> 
     </li> 
     <li> 
     <a href="#">My Profile</a> 
     </li> 
     <li></li> 
    </ul> 
    </div> 
</div>

出典

2016-04-13 13:29:20 KieranDotCo

答えてくれてありがとうございましたが、私のウェブサイトは見た目に似ていますが、デスクトップモードではリンクがNavbarのロゴの下に表示されます:-( –

@MarcusLönnqvist私の悪い！この時間に助けて、働きます！ – KieranDotCo

それは素晴らしいことでした、あなたの助けに感謝、それは今働きます！ –

Html Navbarメニューモバイル

答えて

関連する問題