bootstrap响应div显示

Question

我有两个div

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

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

我该怎么做？

Answer 1

来自Bootstrap docs：

  

通过在文档中包含正确的元标记和其他样式表，启用项目中的响应式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>

对于fluid layout，您可以使用.container-fluid和.row-fluid。