Bootstrap 3.0 -包含固定列大小的流体网格
Bootstrap 3.0 -包含固定列大小的流体网格
提问于 2013-10-08 02:13:59
我正在学习如何使用Bootstrap。目前，我正在摸索布局。虽然Bootstrap很酷，但我看到的一切似乎都过时了。对于我的生活来说，我有一个我认为是我无法弄清楚的基本布局。我的布局如下所示：
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|此网格需要占据整个窗口的高度。据我所知，我需要混合固定和流动的宽度。然而，Bootstrap 3.0似乎不再有fluid类。即使是这样，我似乎也想不出如何混合流体和固定的柱大小。有人知道如何在Bootstrap 3.0中做到这一点吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-10-08 04:21:28
在Bootstrap 3中没有简单的方法来混合流体和固定宽度，它应该是这样的，因为网格系统被设计成一个流动的、响应式的东西。你可以尝试修改一些东西，但这将与响应式网格系统试图做的事情背道而驰，其目的是使布局在不同的设备类型之间流动。
如果您需要坚持这种布局，我会考虑使用自定义CSS来布局您的页面，而不是使用网格。
Stack Overflow用户
发布于 2014-05-03 04:04:46
或将显示属性与表格单元一起使用；
css
.table-layout {
display:table;
width:100%;
}
.table-layout .table-cell {
display:table-cell;
border:solid 1px #ccc;
}
.fixed-width-200 {
width:200px;
}html
<div class="table-layout">
<div class="table-cell fixed-width-200">
<p>fixed width div</p>
</div>
<div class="table-cell">
<p>fluid width div</p>
</div>
</div>Stack Overflow用户
发布于 2016-05-31 22:43:52
好的，我的回答非常好：
<style>
#wrapper {
display:flex;
width:100%;
align-content: streach;
justify-content: space-between;
}
#wrapper div {
height:100px;
}
.static240 {
flex: 0 0 240px;
}
.static160 {
flex: 0 0 160px;
}
.growMax {
flex-grow: 1;
}
</style>
<div id="wrapper">
<div class="static240" style="background:red;" > </div>
<div class="static160" style="background: green;" > </div>
<div class="growMax" style="background:yellow;" ></div>
</div>如果您希望支持所有浏览器，请使用https://github.com/10up/flexibility
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19231742
复制相关文章
相似问题
腾讯云开发者
