2

Twitter Bootstrap を使い始めようとしていますが、何らかの理由で何をしても、ページ全体に div が表示されます。そのため、すべてのdivに独自の行があるように見えるため、グリッドシステム/ナビゲーションバーを正しく表示できません。

これは簡単な修正だと確信していますが、私は完全に困惑しています。

http://jsfiddle.net/Aq5xn/show/

 <!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            @section('title')
                Page Title
            @show
        </title>
        {{-- Ensures proper rendering & touch zooming --}}
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}}
        {{ HTML::style('/css/bootstrap.css') }}
        {{ HTML::style('/css/style.css') }}
    </head>
<body>

    <div class="navbar navbar-fixed-top navbar-inverse">  
      <div class="navbar-inner">  
        <div class="container-fluid">  
          <a class="brand" href="#">asdf</a>  
          <div class="nav-collapse">  
            <ul class="nav">  
              <li class="active"><a href="#">Home</a></li>  
              <li><a href="#about">About</a></li>  
              <li><a href="#contact">Contact</a></li>  
            </ul>  
            <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>  
          </div><!--/.nav-collapse -->  
        </div>  
      </div>  
    </div>


    <div class="container-fluid">
        <div class="row-fluid">  
            <div class="span4">{{-- @yield('content') --}}</div>  
            <div class="span4">Span 4</div>
            <div class="span4">Span 4</div>
        </div>
    </div>
    {{-- Scripts are placed here --}}
    {{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }}
    {{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }}

    </body>
</html>

ブートストラップが機能しない

4

3 に答える 3

6

と混同Bootstrap 2.3.2していBootstrap 3.0.0ます。移行の詳細に関するCHANGELOGで概説されている違いを見つけることができます。あなたのコードをちらりと見ると、navbar-innerクラスが削除され、にcontainer-fluid置き換えられていることがわかります。containerrow-fluid

基本的に、新しいBootstrap 3.0.0エンジンでBootstrap 2.3.2コードを使用しています...移行なしです。上記のリンクに記載されている手順に従って、何をどのように変更する必要があるかを確認してください。

PS: バージョンの時点で3.1は引き続き を使用できますが、標準のコンテナと同様にクラス.container-fluidを使用するだけで済みます。.rowおそらく、これは version の場合でも当てはまりまし3.0た。ドキュメントを誤解していた可能性があります。

于 2013-08-30T07:43:37.620 に答える
4

Bootstrap 3.0.0 を使用していることに注意してください。

span クラスは使用されなくなりました。.col-md-* に変更しました。以下のリンクで詳細をお読みください。

http://getbootstrap.com/css/#grid-options

それでもスパンクラスを使用したい場合。Bootstrap 2.3.2 に戻してください。

于 2013-08-30T07:43:27.353 に答える