2

我在此页面中粘贴了示例“流体嵌套”：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 页面与 bootstrap 的 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 回答