使用固定包装器的Bootstrap网格 - 防止列堆叠 [英] Bootstrap grid with fixed wrapper - Prevent columns from stacking up
本文介绍了使用固定包装器的Bootstrap网格 - 防止列堆叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
顺便说一句：我使用的是版本3，因此我可以移动到一个响应我已经移植了该网站后的布局。 （这是巨大的，我独自一人，所以一步一步是唯一的选择...）
<！DOCTYPE HTML>
< html>
< head>
< title> Bootstrap 101模板< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
<！ - Bootstrap - >
< link rel =stylesheethref =http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css>
<！ - HTML5 shim和Respond.js IE8支持HTML5元素和媒体查询 - >
<！ - [if lt IE 9]>
< script src =../../ assets / js / html5shiv.js>< / script>
< script src =../../ assets / js / respond.min.js>< / script>
<！[endif] - >
< style>
/ *自定义容器* /
.container-fixed {
保证金：0 auto;
max-width：800px;
min-width：800px;
width：800px;
背景颜色：＃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（Bootstrap的JavaScript插件必需） - >
< script src =http://code.jquery.com/jquery.min.js>< / script>
<！ - 包含所有编译的插件（如下），或者根据需要包含单个文件 - >
< script src =http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js>< / script>
< / body>
< / html>
解决方案
sm ， md ， lg 等。cols wrap / stack responsively。使用非堆叠 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>
< 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>
As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?
BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)
<!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>
解决方案
The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...
<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>
Demo: http://bootply.com/80085
EDIT: Bootstrap 4, the xs no longer needs to be specified..
<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>
这篇关于使用固定包装器的Bootstrap网格 - 防止列堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
