web-dev-qa-db-ja.com

Twitter Bootstrap 3-ナビゲーションバーが水平ではない

私はbootstrap 3.水平になっていないことを除いて、水平のナビゲーションバーを作成しようとしています。ナビゲーションバーは箱から出して水平にする必要があると思いました。私はおそらくいくつかの追加のCSSが必要ですか？

bootstrapドキュメントから次のようなナビゲーションバーコピーコードを作成しようとしました：

<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/

twitter-bootstraptwitter-bootstrap-3
8
Quantize

[〜＃〜]デモ[〜＃〜]

コードはBootStrap 2用であり、変更する必要があります。Inbootstrap 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">はもう必要ありません

ドキュメントの詳細情報 ここ 。

20
edsioufi

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>
2
user710031