私のハンバーガーメニューが間違って表示される

Question

私はこの不思議な問題が、私のハンバーガーメニューではブートストラップを使って起こっています。それは右に伸びている、私は理由が分からない。添付のスニペットエディタでうまく見えますが、私の写真は以下のとおりです。これを引き起こす原因は何ですか？

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<nav id="mynav" class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     \t </button> 
 
     <a class="navbar-brand" href="#"><img src="" alt=""/>&#160;<span class="ms-rteThemeForeColor-1-0 ms-rteFontSize-4 ms-rteFontFace-5"></span></a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home<span class="sr-only"></span></a></li> 
 
     <li><a href="#">site1</a></li> 
 
     <li><a href="#">Site2</a></li> 
 
      <li><a href="#">Site 3</a></li> 
 
        <li><a href="#">Site 4</a></li></ul> 
 
       </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

Answer 1

とてもこれを見て、パディングまたはマージンを修正、 '.navbar-トグル' のようなものと呼ばれる可能性があります。パディングやマージンが見えない場合は、0px！importantで追加してみてください。

Answer 2

あなたの問題は、あなたのブートストラップCSSやその他の「テンプレート」スタイルのCSSに含まれている可能性があります。 selectorを「検査ツール」（）を使用して検索してみてください。 Google Chrome DeveloperコンソールまたはFirebug、または必要な場合はIEデベロッパーツール。要素のセレクタを間違った幅で探し、CSS内の希望の幅をそのセレクタに手動で設定します。 すなわち。

.relevantSelector { 
    max-width: $maxwidth; 
    min-width: $minwidth; 
    width: $width; 
} 

また、これはそれを修正するかどうかを確認するために設定されpadding:または任意のmargin:プロパティをチェックして切り替えることができます。しかし、これは間違いなくCSSの問題です。上記のことをしたくない場合は、上記の「ツールの検査」やスタイルシートやCSSを使用してCSSプロパティのいくつかを無効にして、正しい幅に戻って競合を分離できるかどうかを確認してください。