Question

我不是设计师也不是非常擅长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

提前谢谢

Answer 1

这应该做你想要的：

启用响应能力

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

添加带行和跨度的容器（bootstrap总共跨度为12，因此跨度数需要加起来为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

Answer 2

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

当你真的需要使用流畅的布局和span-*标签来分隔你的div时，你给你的div固定宽度，否则它不会产生预期的效果。

Answer 3

对于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%）

设计中div与并排出现，并在没有足够空间时堆叠

3 个答案: