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小提琴，虽然js小提琴本身的四重布局似乎是在添加自己的行为。

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

Answer 1

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

您可以尝试这种方法。使用左栏中的float:left;，然后将padding-left:200px;提供给右栏，即可。{1}}。您已经绘制了布局。在底部添加了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知道你为什么不应该使用它。

Answer 2

因此，您基本上希望正确的列适合可用空间。

您有5个不是特定于bootstrap的选项，而是一般的HTML / CSS：

1）使用calc

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

这显然排除了IE8和其他browsers that do not support calc。

2）使用float 我没想到那个。检查@henser's answer。似乎工作得很好，虽然我的印象是如果没有足够的可用空间，右边的col会崩溃。显然我错了 - 如果你想支持旧的浏览器，这似乎是最好的方法。

3）使用flexbox 这是一个更多的工作，也许复杂，但我可以建议this great guide开始使用flexbox。那显然也是excludes old IE versions。

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

5）Javascript 您可以使用JavaScript来计算剩余空间。但这当然需要在调整大小时触发。不建议使用，因为它不如其他选项快。

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

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

2 个答案: