正如标题所说,我正在尝试使用带有固定包装器的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> …css grid web-deployment twitter-bootstrap twitter-bootstrap-3
我目前面临以下情况：
<div class="row no-gutters">
<div class="col"></div>
<div class="col col-auto"></div>
</div>
因此，第一列将占用第二列未填充的可用空间
即[| -------- column1 -------- | | column2 | ]
我的问题是里面的内容column1的宽度大于包含行的宽度。发生的是，不是column1缩小以仍然使两列都适合同一行行，而是column1像填满整个行一样填充整个行col-12并column2下降到新行，从而包装了列。
有没有办法防止这种行为，并始终将两列保持在同一行？