ウィンドウサイズを小さくすると、ブートストラップnavbarの左側のコンテンツが消えてしまいます

ウィンドウサイズを小さくするとナビゲーションバーの左側のコンテンツが消えてしまうという問題があります。 rowとcolumn（column-sm and column-xs-）クラスを使用してみましたが、問題は解決しましたが、それでも問題はありません。ウィンドウサイズを小さくすると、ブートストラップnavbarの左側のコンテンツが消えてしまいます

また、バーの画像も添付しています。画面サイズは画面サイズが

低減され第二の画像で

最大化されている最初のイメージで

は、だから私は、コンテンツXYZが常に見られるべきであることを望みます画面の大きさにかかわらず。すべてのヘルプは大歓迎されます

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <div class="row row-content"> 
       <div class="col-xs-11 col-sm-4"> 
        <ul class="nav navbar-nav navbar"> 
         <li> <a href="#"><b> XYZ </b></a></li> 
        </ul> 
       </div> 
       <div class="col-xs-1 col-sm-8"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
          aria-hidden="true"></span> Home</a></li> 
         <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
          aria-hidden="true"></span>About</a></li> 
         <li><a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav>

：

私はまた、ナビゲーションバーのHTMLコードを与えています。ありがとうございました。

出典

2016-05-30 Snake Eyes

ブランドのアンカータブ「XYZ」を間違って配置しました。あなたのブランドにnavbar-brandを使用してください。より良い

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <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" href="#"><b> XYZ </b></a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <div class="row row-content"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
 
          aria-hidden="true"></span> Home</a> 
 
      </li> 
 
      <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
 
          aria-hidden="true"></span>About</a> 
 
      </li> 
 
      <li> 
 
      <a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</nav>

出典

2016-05-30 19:00:50

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

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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" href="#"><b> XYZ </b></a></li> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
          aria-hidden="true"></span> Home</a></li> 
         <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
          aria-hidden="true"></span>About</a></li> 
         <li><a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav> 
</body> 
</html>

これを試してください。

ことは、それがまた崩れている理由ようだあなたはnavbar-collapse
にクラスnavbar-brandとのリンクを使用しています。

問題が解決したらうれしいです。

出典

2016-05-30 18:56:22 bhansa

作業トグル取得するには、ブートストラップJS前にjqueryのリンクを与えます。 – bhansa

ウィンドウサイズを小さくすると、ブートストラップnavbarの左側のコンテンツが消えてしまいます

答えて

関連する問題