html - 是否有可能拥有混合流体/非流体网格系统？

Question

使用 bootstrap 2，最简单的方法是在左侧设置静态宽度列，并使右侧列可变。像这样的东西，左列宽度为 200 像素，右侧为填充浏览器窗口。

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

我尝试将最小宽度添加到常规容器布局，但在调整大小时它有一些奇怪的行为:

<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 fiddle ，尽管 js fiddle 本身的四边形布局似乎正在添加自己的行为。

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

Answer 1

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

你可以试试这个方法。在左列使用 float:left; 并在右列使用 padding-left:200px; 即可。你已经绘制了你的布局。在底部添加了 clearfix，以便您将来可以根据需要使用页脚。这样您就可以保持对大多数浏览器的支持。

检查 JsFiddle Demo

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 支持，这是实现它的最简单方法。您可以了解如何 here

<强>2。媒体查询(仅限 IE9+)

您可以像 Bootstrap 一样使用媒体查询，但您不能使用百分比度量来实现您正在寻找的内容。您可以使用它来更改 css 属性值并以这种方式使其响应(根据您的自定义限制)。

<强>3。 Flexbox(仅限 IE10+(部分 IE9))

会很棒，但由于浏览器支持，目前不推荐。

<强>4。表格

取this thread了解为什么不应该使用它。