Question

流体布局的

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

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

Answer 1

如果您正在尝试查看那些仅显示在那里的蓝框，以供参考，并指出网格是如何划分的。它们实际上并不意味着包含在代码中。单词边栏内容和正文内容是您显示内容的参考点。为了得到一些阴影，你需要在span2和span10 div之间添加一个CSS类。这是一个例子：

<div class="span2 well">
  Sidebar content
</div>

Answer 2

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

Bootstrap容器盒

2 个答案: