Question

我在此页面粘贴了“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 http://s4.postimage.org/wpnf9zxbh/Untitled.png

我的html页面与bootstrap的css和js文件夹位于同一目录中，因此'css / bootstrap.min.css'链接正确。

提前致谢

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

简单的twitter bootstrap示例未按预期显示

1 个答案: