以下是我在Bootstrap 3.2中的布局结构：
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
<div class="col-xs-6">
<!-- I want only this column to be fluid. -->
</div>
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
正如您在psuedo-code注释中所看到的,我希望根据屏幕大小,只有中间列是流畅的.
Bootstrap的容器流体方式是否可行？或者我应该通过其他方式？
解决方法
列没有固定宽度的“Bootstrap方式”.因此,我们可以使用CSS在几个方面做你想做的事情
.row {
display: flex;
}
.fixed-side-column {
width: 250px;
}
.fluid-middle-column {
flex-grow: 1;
}
>使用calc()(或等效的JavaScript)记住browser support – Demo
.row > div {
float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
width:250px;
}
.fluid-middle-column {
width:calc(100% - 500px);
}
>在中间元素上使用绝对定位和填充以消除任何计算的需要 – Demo
你必须改变一些标记
<div class="container-fluid">
<div class="row">
<div class="fluid-middle-column">
<!-- I want only this column to be fluid. -->
</div>
<div class="fixed-side-column">
<!-- I want this column to be fixed. -->
</div>
<div class="fixed-side-column right">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
/* CSS */
.fixed-side-column {
width:250px;
float:left;
}
.right {
float:right;
}
.fluid-middle-column {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
padding: 0 250px 0 250px;
}