是否可以使用混合流体/非流体网格系统？

Question

使用bootstrap 2,在左侧使用静态宽度列并使右列成为流体的最简单方法是什么.像这样的东西,左侧列宽200像素,右侧填充浏览器窗口.

======================
Hello
======================
 A   |
 B   |      100%
200px|
 D   |
 E   |
 F   |

我尝试将min-width添加到常规容器布局中,但在调整大小时它有一些奇怪的行为:

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">Hello</div>
    </div>

    <div class="row-fluid">
        <div class="span2" style="min-width:200px">Left Column</div>
        <div class="span10">Right Column</div>
    </div>

</div>

这里有一个JS小提琴,虽然js小提琴的四重布局本身似乎在添加自己的行为.

http://jsfiddle.net/BVmUL/882/

Answer 1

对你的问题的简短回答是否定的.Bootstrap 2使用媒体查询和百分比度量来实现其响应式网格布局.尝试使用Bootstrap 2进行混合方法是完全多余的.

你可以尝试这种方法.float:left;在左栏上使用并给出一个padding-left:200px;右栏,就是这样.你绘制了你的布局.在底部添加了clearfix,以便将来可以使用页脚.这样您就可以继续支持大多数浏览器.

检查JsFiddle演示

HTML

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12 header">Hello</div>
    </div>

    <div class="row-fluid">
        <div class="span2 left-col">Left Left Left Left Left Left Left</div>
        <div class="span10 right-col">Right Right Right Right Right Right Right </div>
    </div>

</div>
   <div class="clearfix"></div>

CSS

.header{
    background-color:#f00;
}
.left-col{
    background-color:#0f0;
    float:left;
    width:200px;
    height:400px;
}
.right-col{
    background-color:#00f;
    height:400px;
    padding-left:200px;
}

之后,您可以使用Javascript动态调整窗口大小调整左侧列宽和右侧列填充.

您可能还想考虑以下备选方案:

1. Calc()(仅限IE9 +)

如果您不关心IE8支持,这是实现它的最简单方法.你可以在这里学习

2.媒体查询(仅限IE9 +)

您可以像Bootstrap一样使用媒体查询但不能使用百分比度量来实现您所需的内容.您可以使用它来更改css属性值,并以此方式使其响应(使用您的自定义限制).

3. Flexbox(仅限IE10 +(部分IE9))

由于浏览器的支持,现在会很棒但不推荐.

4.表格

拿这个帖子知道为什么你不应该使用它.