5

Twitter Bootstrap Scaffolding部分的 Fluid layout 显示了示例代码，显示为两个蓝色框。使用该示例，下面的代码显示“侧边栏内容正文内容”但没有框。还需要什么？

<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      Sidebar content
    </div>
    <div class="span10">
      Body content
    </div>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>
4

2 回答 2

6

如果您想查看那些只是显示在那里的蓝色框以供参考并指出网格是如何划分的。它们实际上并不意味着包含在代码中。Sidebar Content 和 Body Content 这两个词是您显示内容的参考点。为了获得一些阴影，您需要在 span2 和 span10 div 旁边添加一个 CSS 类。这是一个例子：

<div class="span2 well">
  Sidebar content
</div>
于 2013-07-20T22:57:24.670 回答
4

Bootstrap 文档有一个额外的样式属性show-grid，用于span*在行内的（列）上显示背景（框）。CSS 看起来像这样：

.show-grid [class*="span"] {
    background-color: #ddd;
}

并像这样应用于文档中的行..

<div class="row-fluid show-grid">
    <div class="span2">
      Sidebar content
    </div>
    <div class="span10">
      Body content
    </div>
</div>

演示： http: //www.bootply.com/68856

于 2013-07-21T10:35:19.113 回答