ブートストラップ折り畳まれたナビゲーションバー - メニューを左に揃えたいが、右に揃えたい

Question

表示ウィンドウが小さいときに折りたたむシンプルなブートストラップナビバーを作った。私はそのナビゲーバーに画像を追加しました。

ブラウザウィンドウを小さくしてハンバーガーメニューが表示されたら、折りたたみメニューがウェブページの一番左に揃っていないので、下の同封の画像をご覧ください。

折りたたみ可能なメニューを左に揃えたいのですが、どうすればいいですか？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html" class="navbar-left logo"> 
 
     <img src="img/logo.png" height="40px"> 
 
     </a> 
 
     <a class="navbar-brand text-hide" href="index.html">title</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse navbar-left" id="menu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"> 
 
      <a href="index.html">Bio</a> 
 
     </li> 
 
     <li> 
 
      <a href="portfolio.html">Portfolio</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Freebies</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

事前に感謝

Screenshot of my collapsed navabar issue

Answer 1

それはモバイルビューを変更しないように、あなたのCSSでのメディアクエリを使用してください。

実施例：/：

@media (min-width: 768px) { 
 
    .nav { 
 
    margin-left: 212px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 

 
     <a href="#" class="navbar-left logo"> 
 
     <img src="http://placehold.it/50x50/f00/fff" height="50px"> 
 
     </a> 
 

 
     <a class="navbar-brand text-hide" href="#">title</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="menu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Bio</a> 
 
     </li> 
 
     <li><a href="#">Portfolio</a> 
 
     </li> 
 
     <li><a href="#">Freebies</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

次の操作を行う 2の画像の後に 1）移動ボタンタグを変更する）IMGで、以下のようにスタイル属性を追加し、ボタンタグ

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
    
 
     <a href="index.html" class="navbar-left logo"> 
 
     <img src="img/logo.png" height="40px" style="float:left;"> 
 
     </a> 
 
     <button type="button" style="float:left;" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand text-hide" href="index.html">title</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse navbar-left" id="menu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"> 
 
      <a href="index.html">Bio</a> 
 
     </li> 
 
     <li> 
 
      <a href="portfolio.html">Portfolio</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Freebies</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>