我正在学习如何使用Bootstrap。目前,我正在通过布局趟过。虽然Bootstrap很酷,但我看到的一切看起来都过时了。对于我的生活,我认为我认为是一个我无法弄清楚的基本布局。我的布局如下所示:
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|
此网格需要占据窗口的整个高度。根据我的理解,我需要混合固定和流体宽度。但是,Bootstrap 3.0似乎不再具有流体类。即使它确实如此,我似乎无法弄清楚如何混合流体和固定的柱尺寸。有没有人知道如何在Bootstrap 3.0中执行此操作?
答案 0 :(得分:149)
编辑:由于很多人似乎想要这样做,我在这里写了一篇简短的指南,其中包含更常见的用例https://www.atlascode.com/bootstrap-fixed-width-sidebars/。希望它有所帮助。
bootstrap3网格系统支持行嵌套,允许您调整根行以允许固定宽度的侧面菜单。
你需要在根行上放一个填充 - 左边,然后有一个包含普通网格布局元素的子行。
以下是我通常这样做的方法 http://jsfiddle.net/u9gjjebj/
HTML
<div class="container">
<div class="row">
<div class="col-fixed-240">Fixed 240px</div>
<div class="col-fixed-160">Fixed 160px</div>
<div class="col-md-12 col-offset-400">
<div class="row">
Standard grid system content here
</div>
</div>
</div>
</div>
CSS
.col-fixed-240{
width:240px;
background:red;
position:fixed;
height:100%;
z-index:1;
}
.col-fixed-160{
margin-left:240px;
width:160px;
background:blue;
position:fixed;
height:100%;
z-index:1;
}
.col-offset-400{
padding-left:415px;
z-index:0;
}
答案 1 :(得分:30)
用Bootstrap 3混合流体和固定宽度真的没有简单的方法。它的意思是这样的,因为网格系统被设计成一个流畅的,响应性的东西。您可以尝试攻击某些内容,但这会与Responsive Grid系统尝试执行的操作相违背,其目的是使该布局跨越不同的设备类型。
如果您需要坚持这种布局,我会考虑使用自定义CSS布局您的页面,而不是使用网格。
答案 2 :(得分:25)
或使用带有table-cell的display属性;
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>
答案 3 :(得分:21)
我的问题略有不同:
结果,我使用float
来左右列,然后可以使用Bootstrap的row
来完成两者之间的流体列。
<div>
<div class="pull-left" style="width:240px">Fixed 240px</div>
<div class="pull-right" style="width:120px">Fixed 120px</div>
<div style="margin-left:240px;margin-right:120px">
<div class="row" style="margin:0px">
Standard grid system content here
</div>
</div>
</div>
答案 4 :(得分:14)
2018年更新
IMO,在Bootstrap 3中处理此问题的最佳方法是使用与Bootstrap的断点对齐的媒体查询,这样您只使用固定宽度列是更大的屏幕,然后让布局在较小的屏幕上响应。这样你就能保持响应能力......
@media (min-width:768px) {
#sidebar {
width: inherit;
min-width: 240px;
max-width: 240px;
min-height: 100%;
position:relative;
}
#sidebar2 {
min-width: 160px;
max-width: 160px;
min-height: 100%;
position:relative;
}
#main {
width:calc(100% - 400px);
}
}
Working Bootstrap Fixed-Fluid Demo
Bootstrap 4 将有flexbox,因此这样的布局会更容易:http://www.codeply.com/go/eAYKvDkiGw
答案 5 :(得分:3)
好的,我的回答非常好:
<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
答案 6 :(得分:0)
更新2014-11-14: 下面的解决方案太旧了,我建议使用flex box布局方法。以下是概述:http://learnlayout.com/flexbox.html
我的解决方案
<li class="grid-list-header row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
<li class="grid-list-item row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
.row-cw {
position: relative;
}
.col-cw {
position: absolute;
top: 0;
}
.ir-msg-list {
$col-reply-width: 140px;
$col-action-width: 130px;
.row-cw-msg-list {
padding-right: $col-reply-width + $col-action-width;
}
.col-cw-name {
width: 50%;
}
.col-cw-keyword {
width: 50%;
}
.col-cw-reply {
width: $col-reply-width;
right: $col-action-width;
}
.col-cw-action {
width: $col-action-width;
right: 0;
}
}
无需修改过多的引导程序布局代码。
更新(不是来自OP):在下方添加代码段以便于理解此答案。但它似乎没有按预期工作。
ul {
list-style: none;
}
.row-cw {
position: relative;
height: 20px;
}
.col-cw {
position: absolute;
top: 0;
background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
padding-right: 270px;
}
.col-cw-name {
width: 50%;
background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
width: 50%;
background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
width: 140px;
right: 130px;
background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
width: 130px;
right: 0;
background-color: rgba(150, 150, 0, .5);
}
<ul class="ir-msg-list">
<li class="grid-list-header row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
<li class="grid-list-item row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
</ul>
答案 7 :(得分:-4)
为什么不在您自己的css中将左侧两列设置为固定,然后为其余内容创建完整12列的新网格布局?
<div class="row">
<div class="fixed-1">Left 1</div>
<div class="fixed-2">Left 2</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11"></div>
</div>
</div>