ブートストラップ4 navi-barブレークポイント

-1

こんにちは、私のナビゲーションバーが反応するようにしようとしていますが、解像度を下げるとnavbarが 'COMPANY'の下にありますが、私はいくつかの投稿を見ましたが、誰かがこれを修正する方法を知っているか尋ねますか？ブートストラップ4 navi-barブレークポイント

マイコード：

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-header"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
      </div> 
      <a href="#" class="comp navbar-brand">COMPANY</a> 
     </div> 
    <div class="collapse navbar-collapse" id="mainNavBar"> 
     <ul class="navi nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Contact</a></li> 
     <ul> 
    </div> 
    </nav> 
     <center><button type="button" class="learn">Learn more</button></center> 
     <center><p class="how">How did i get started?</p></center> 
     <center><p class="date">2016-2017</p></center> 
</body>

出典

2017-07-01 Choori 02

あなたが内容や家のブートストラップグリッドシステムをラップするために、あなたのナビゲーションバーのため.containerまたは.container-fluidを使用する必要があります。詳細については、ContainersおよびNavbarセクションを参照してください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<!-- Navigation --> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="mainNavBar"> 
 
     <ul class="navi nav navbar-nav navbar-right"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Portfolio</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

@grid-float-breakpointと@grid-float-breakpoint-max LESS変数（Grid systemセクションを参照）を使用し、崩壊ナビゲーションバーの位置を制御します。また、Media queries breakpointsのカスタム値を設定することもできます。 customizationツールを使用して独自のバージョンのBootstrapを入手することは可能です。

出典

2017-07-01 16:47:45 Alexander

は、私はそれをしなかったが、私がしようとすると –

–

、あなたが*実行コードスニペットをプッシュする場合*ボタンをChoori02 @ –

ブートストラップ4 navi-barブレークポイント

答えて

関連する問題