设计让 div 并排出现，并在空间不足时堆叠答案

【问题标题】：design where divs appear side by side, and stacked when not enough space设计让 div 并排出现，并在空间不足时堆叠
【发布时间】：2013-09-20 15:08:01
【问题描述】：

我不是设计师，也不擅长 CSS，但我确信 boostrap 有能力帮助我解决这个问题（尤其是跨浏览器）。本质上我希望能够创建以下情况

DIV-1           DIV-2
DIV-3           DIV-4
DIV-5           DIV-6

当两列 div 有足够的空间时（每个 div 将具有固定的宽度）。当没有足够的空间将它们排列成一列时：

DIV-1           
DIV-2
DIV-3           
DIV-4
DIV-5           
DIV-6

提前谢谢你

【问题讨论】：

您使用的是引导程序 2 还是引导程序 3？

标签： html css twitter-bootstrap

【解决方案1】：

对于 BS3，您需要使用这个：

<div class="container">
    <div class="row">
        <div class="col-md-6">Column 1
        </div>
        <div class="col-md-6">Column 2
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">Column 3
        </div>
        <div class="col-md-6">Column 2
        </div>
    </div>
</div>

您可以将6 更改为12，但col-md- 的总和必须等于12

随着可用屏幕宽度的变化，列将调整以匹配（6 为 width:50%）

【讨论】：

【解决方案2】：

您需要将模板配置为 response design 默认值。这将允许您的 div 随视口宽度缩放。

当您确实需要使用流畅的布局和span-* 标记来分隔您的 div 时，您正在为您的 div 提供固定宽度，否则它不会达到预期的效果。

【讨论】：

【解决方案3】：

这应该做你想做的：

启用响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

添加带有row和span的容器（bootstrap一共跨了12个所以span的个数加起来需要12个

<div class="container">
  <div class="row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
  </div>
</div>

如果启用了响应式布局，这应该可以工作。

一个完整的工作示例：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/bootstrap-responsive.css" rel="stylesheet">
  <style>
   body {
    padding-top: 60px;
   }


  </style>

 </head>
 <body>

<div class="container">
  <div class="row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
  </div>
</div>

  <script src="js/jquery-2.0.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

 </body>
</html>

您可以在此处找到更多信息： Bootstrap - Getting started

【讨论】：

我看到你链接到 BS2 文档。顺便说一句，这不是 BS3 的有效代码。
BS 3.0 方法是什么？
这是针对 BS2 的，正如 Eonasdan 上面所说的那样。问题没有提到BS的版本，抱歉。
很容易转换 - 看起来可以使用他们的备忘单getbootstrap.com/getting-started/#migration