具有固定包装器的引导网格 - 防止列堆叠
Posted
技术标签:
【中文标题】具有固定包装器的引导网格 - 防止列堆叠【英文标题】：Bootstrap grid with fixed wrapper - Prevent columns from stacking up 【发布时间】：2013-09-13 23:42:58 【问题描述】：正如标题所说，我正在尝试使用带有固定包装器的 Bootstrap 3 网格系统。但是当我调整浏览器的大小时，即使包装器保持相同的大小，列也会堆积起来？
顺便说一句：我使用的是第 3 版，以便在移植网站后可以切换到响应式布局。 （这是巨大的，我一个人，所以一步一步是唯一的选择......）
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style>
/* Custom container */
.container-fixed
margin: 0 auto;
max-width: 800px;
min-width: 800px;
width: 800px;
background-color:#C05659;
.container-fixed > hr
margin: 30px 0;
</style>
</head>
<body>
<div class="container-fixed">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<hr>
</div>
<!-- jQuery (necessary for Bootstrap's javascript plugins) -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：sm,md,lg 等.. cols 响应式包装/堆叠。使用非堆叠 col-xs-* 类...
<div class="container">
<div class="row">
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
</div>
</div>
演示：http://bootply.com/80085
编辑： Bootstrap 4，xs 不再需要指定..
<div class="container-fluid">
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
</div>
【讨论】：
谢谢，我自己没有在“网格选项”部分看到这个真的很尴尬：getbootstrap.com/css/#grid以上是关于具有固定包装器的引导网格 - 防止列堆叠的主要内容，如果未能解决你的问题，请参考以下文章