twitter-bootstrap - 引导响应式 div 显示

Question

我有两个 div

<div class="container">
<div class="span6">
</div>
<div class="span6">
</div>
</div>

当用户使用手机时，div应该是两行一列，而不是两列一行。

我怎么做 ？

Answer 1

从引导文档：

通过在文档中包含正确的元标记和附加样式表，在您的项目中启用响应式 CSS。如果您已从自定义页面编译 Bootstrap，则只需包含元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

另外，使用正确的标记（.spanX应该在里面.row）：

<div class="container">
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
</div>

对于流体布局，您可以使用.container-fluid和.row-fluid。