8

ブートストラップ 3 をいじっています。水平にならない場合を除いて、水平のナビゲーション バーを作成しようとしています。navbar は箱から出してすぐに水平にすべきだと思ったのですが、追加の css が必要でしょうか?

次のように、ブートストラップのドキュメントからコードをコピーするナビゲーション バーを作成しようとしました。

<div class="row">
    <div class="col-12">            
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div> 
    </div>
</div>

http://jsfiddle.net/FxkZT/

4

2 に答える 2

20

デモ

コードは BootStrap 2 用であり、変更する必要があります。ブートストラップ 3 では:

  1. <a class="brand" href="#">Title</a>になる<a class="navbar-brand" href="#">Title</a>
  2. <ul class="nav">になる<ul class="nav navbar-nav">
  3. もう必要ありません<div class="navbar-inner">

詳細については、こちらのドキュメントを参照してください。

于 2013-08-12T15:50:43.160 に答える
2

http://jsfiddle.net/FxkZT/5/

この小さなCSSを追加しただけです。チェックして、うまくいくかどうか教えてください。

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: top;
}

HTML:

<div class="row">
    <div class="col-12">
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>


    </div>
</div>
于 2013-08-12T15:45:35.023 に答える