ブートストラップ：Navのコンテンツのセンタリングと小さな画面でのデフォルトビーエイシーの変更

フロートを追加してBootstrapクラスをいくつか使って試してみました。私は何が欠けているか分からない。私はulまたはすべてのアイテムを中心にしたいと思います。以下は、NAVマークアップされていますブートストラップ：Navのコンテンツのセンタリングと小さな画面でのデフォルトビーエイシーの変更

http://jsfiddle.net/bdd9U/1489/

<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </nav> 
    <h1>Home</h1> 
</div>

はまた、小さな画面上で、NAVのデフォルトの動作は、互いの上に積み重ねることです。アクティブリンクが表示されている（または別のリンクを使用している）唯一のリンクになるようにしたかったのですが、他のリンクに対しては水平方向にスクロールすることができます。私はScrollspyの使用を計画しているので、アクティブなリンクが自動的に更新され、それによって差が生じます。どのようにそれにアプローチするかわからない - 任意のアイデアをいただければ幸いです。

出典

2017-04-02 Anonymous

li要素はブロックレベルであるため、（display :blockは、ブートストラップのCSSを介して適用される）、すべてを行う必要がulにtext-align: centerを追加です：

.navbar-nav { 
    text-align: center; 
}

私はこのhereを展示更新フィドルを作成しました。

ScrollSpyエフェクトについてはわかりませんが、パラメータの引数としてリンクのコレクションを渡すことができます。

希望すると便利です。 :)

出典

2017-04-02 21:55:20

私は 'bootstrap navbar example'（http://getbootstrap.com/components/#navbar）の使用をお勧めします。

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container-fluid"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
        <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="#">Brand</a> 
 
       </div> 
 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
        <li><a href="#">Link</a></li>   
 
       </ul>     
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="#">Link</a></li>     
 
       </ul> 
 
       </div><!-- /.navbar-collapse --> 
 
      </div><!-- /.container-fluid --> 
 
     </nav> 
 
    </body> 
 
</html>

：具体的には、あなたの状況では、私は、この修正バージョンを使用したいです

出典

2017-04-02 22:54:25 Muhiddin

ブートストラップ：Navのコンテンツのセンタリングと小さな画面でのデフォルトビーエイシーの変更

答えて

関連する問題