0

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

先感谢您

4

3 回答 3

0

这应该做你想要的：

启用响应能力

<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 - 入门

于 2013-09-20T15:14:03.587 回答
0

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

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

于 2013-09-20T15:14:20.403 回答
0

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

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

于 2013-09-20T16:35:47.017 回答