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

使用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提琴，尽管JS提琴本身的四元布局似乎添加了自己的行为

---

因此您基本上希望右栏适合可用空间

您有5个选项，它们不是特定于引导，而是通用HTML/CSS：

1）使用计算器

    .left-col {
        width: 200px;
    }
    .right-col {
        width: calc(100% - 200px);
    }

这显然不包括IE8和其他

2）使用浮动 我没想到那个。检查一下。虽然我觉得如果没有足够的可用空间容纳内容，正确的col会崩溃，但它似乎工作得很好。显然我错了——如果你想支持旧的浏览器，这似乎是最好的方法

3）使用flexbox 这是一个多一点的工作，也许复杂，但我可以建议开始与flexbox。 显然也是这样

4）使用表格 丑陋，不推荐，但它支持所有浏览器

5）Javascript 您可以使用JavaScript计算剩余空间。但这当然需要在重新调整大小时启动。不推荐，因为它没有其他选项快

// jQuery example
$('.right-col').width($(window).width() - $('.left-col').width());

---

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

您可以尝试这种方法。使用<代码>浮动：左填充左边：200px到右边的列，就是这样。您已经绘制了布局。在底部添加了clearfix，以便将来如果您愿意，可以使用页脚。通过这种方式，您可以保持对大多数浏览器的支持

检查

HTML

之后，您可以使用Javascript动态调整窗口大小时的左栏宽度和右栏填充

<>你也可以考虑下面的选择：

1。计算（）（仅限IE9+）

如果你不关心IE8-支持，这是实现它最简单的方法。你可以学习如何

2。媒体查询（仅限IE9+）

您可以像Bootstrap一样使用媒体查询，但不能使用百分比度量来实现所需的内容。您可以使用它来更改css属性值，并通过这种方式使其响应（具有自定义限制）

3。Flexbox（仅限IE10+部分IE9））

将是伟大的，但不推荐现在，因为浏览器支持

4。表格

---

了解不应该使用它的原因。

如果您喜欢动态高度，则使用overflow:hidden时无需进行高度声明或填充；对于右列。看这个啊还有一个简单的方法。回答得很好。我把它包括在我的列表中，并附有你答案的链接+1.

<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>

.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;
}