设计中，div并排出现，在空间不足时堆叠。
设计中，div并排出现，在空间不足时堆叠。
提问于 2013-09-20 15:08:01
我不是一个设计师，也不是非常擅长CSS的事情，但我确信引导有能力帮助我这个(特别是跨浏览器)。本质上，我希望能够创建以下情况
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提前谢谢你
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-20 16:35:47
对于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%)
Stack Overflow用户
发布于 2013-09-20 15:14:03
这应该是你想做的事：
启用响应
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">添加带有行和span的容器(引导程序总共跨越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>您可以在这里找到更多信息：启动-入门
Stack Overflow用户
发布于 2013-09-20 15:14:20
您需要为响应设计默认值配置模板。这将允许您的div与视口宽度进行缩放。
当你真的需要使用流体布局和span-*标签来分隔你的div时，你就给出了你的div固定的宽度，否则它不会产生预期的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18920100
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号