CSS Bootstrap 容器盒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17767463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap container boxes
提问by CW Holeman II
Twitter Bootstrap Scaffoldingsection on Fluid layout shows example code which displays as two blue boxes. Using that example, the code below, displays "Sidebar content Body content" but no boxes. What else is needed?
流体布局上的 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>
回答by James Giroux
If you're trying to see the blue boxes those are just displayed there for reference and to point out how the grid is divided. They are not actually meant to be included in the code. The words Sidebar Content and Body Content are your reference points for where content will be displayed. In order to get some shading you will need to add a CSS class beside your span2 and span10 divs. Here's an example:
如果您想查看蓝色框，它们只是显示在那里以供参考并指出网格是如何划分的。它们实际上并不打算包含在代码中。侧边栏内容和正文内容是内容显示位置的参考点。为了获得一些阴影，您需要在 span2 和 span10 div 旁边添加一个 CSS 类。下面是一个例子：
<div class="span2 well">
Sidebar content
</div>
回答by Zim
The Bootstrap docs have an additional style property show-gridthat is used to display a background (boxes) on the span*(columns) inside of rows. The CSS looks like this:
Bootstrap 文档有一个额外的样式属性show-grid，用于span*在行内的（列）上显示背景（框）。CSS 看起来像这样：
.show-grid [class*="span"] {
background-color: #ddd;
}
and is applied to the rows in the docs like this..
并像这样应用于文档中的行..
<div class="row-fluid show-grid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
