2

このページに「Fluid Nesting」の例を貼り付けました: http://twitter.github.com/bootstrap/scaffolding.html

    <!DOCTYPE html>
    <html>
        <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        </head>
      <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <div class="row-fluid">
        <div class="span12">
        Fluid 12
        <div class="row-fluid">
        <div class="span6">
          Fluid 6
          <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>
  </body>
</html>

これは私が得るものです：

http://s4.postimage.org/wpnf9zxbh/Untitled.png

私のhtmlページはブートストラップのcssおよびjsフォルダーと同じディレクトリにあるため、「css/bootstrap.min.css」リンクは正しいです。

前もって感謝します

4

1 に答える 1

1

含まれているリソースに対して正しいレンダリングが得られていると思います。Bootstrapドキュメントページで同じスタイルが得られていない可能性があります。

Bootstrapドキュメントページには、スタイリング用の別のリソースファイルが含まれています。（これは、ページのソースを表示することで確認できます）

http://twitter.github.com/bootstrap/assets/css/docs.css

show-gridページ内の特定のスタイルは、クラスを持つdiv要素にクラスを追加することによって実現されましたrow-fluid。

以下のようにコードを編集しました。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href='http://twitter.github.com/bootstrap/assets/css/docs.css' rel='stylesheet'>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <div class="row-fluid show-grid">
            <div class="span12">
                Fluid 12
                <div class="row-fluid show-grid">
                    <div class="span6">
                        Fluid 6
                        <div class="row-fluid show-grid">
                            <div class="span6">Fluid 6</div>
                            <div class="span6">Fluid 6</div>
                        </div>
                    </div>
                    <div class="span6">Fluid 6</div>
                </div>
            </div>
        </div>
    </body>
</html>
于 2013-03-14T22:30:42.253 に答える