具有固定包装器的Bootstrap网格-防止列堆积
如标题所述，我正在尝试将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>
问题答案：
的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>
编辑： 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>
-
问题内容： 我专门针对移动设备，因此我有一个Bootstrap响应表。它只是一个带有引导类“表响应”的div和一个嵌套在表中的类，该类与“表表条纹表边界表悬停表压缩表”类嵌套在一起。 有什么简单的方法可以确保第一列是固定的（不是水平滚动）？在移动设备上，每次可能都有滚动，但第一列实际上包含表标题。 问题答案： 如果您仅针对移动设备，那么这可能对您有用：您可以克隆表中的第一列并应用，以便在滚动表的其
-
本文向大家介绍堆叠到水平Bootstrap 网格，包括了堆叠到水平Bootstrap 网格的使用技巧和注意事项，需要的朋友参考一下 以下是显示堆叠到水平Bootstrap网格的示例- 示例
-
问题内容： 对于最小的xs大小，即使我的列加起来等于12，如果屏幕宽度减小到某个限制之外，它们也不会按预期工作。例如：- 我希望如果减小尺寸，最后一列将堆积到屏幕末端。然而，这种情况并非如此。当屏幕减小到超过特定限制时，最后一列将朝屏幕的开头逐渐结束。我已经考虑过编写CSS代码来赋予容器最小宽度。但是，我认为引导程序可能有更好的方法来处理此问题 问题答案： 在屏幕宽度<360px处，列开始换行，因
-
我有4列网格窗格（fixed1，liquid，fixed2，liquide）。每个液柱的宽度必须为=（gridpane width-fixed1-fixed2）/2。换句话说，是液柱宽度的50%。重要提示：所有宽度=液体宽度固定宽度。为了设置列约束，我找到了以下代码： 但是，此代码设置的不是液体宽度的百分比，而是所有宽度的百分比。怎么做？
-
我正在尝试用html和CSS制作以下内容：图像草图 基本上，我想完成这一点： 左右边栏的宽度始终为200px，它们本身没有页边距或页边距（它们的高度为100%) 中间为12列网格div，网格间隙为10px 网格如何结构化本身并不重要（我知道这部分），但是我没有按照正确的顺序对齐div（左、网格和右侧栏）。 null null 我要格子在两个边栏之间...
-
目前在Jetpack Compose中，此代码会抛出一个，因为您无法嵌套两个垂直滚动的Composables： 我不希望网格本身滚动，而只是显示我传递到其中的可组合的固定网格。在 中显示非滚动网格是否有任何解决方法？