使用 Bootstrap 的流体固定流体布局答案

【问题标题】：fluid-fixed-fluid Layout using Bootstrap使用 Bootstrap 的流体固定流体布局
【发布时间】：2013-09-07 10:16:04
【问题描述】：

但我读过很多其他的）

我正在尝试为我的投资组合网站创建一个固定不变的流体布局。我在网上尝试了几种不同的选项，但我看到的每个人都提供固定流体固定或将两个流体柱放在一边的布局。

我希望有一个直截了当的 1024px 中间（内容）部分，旁边有两个支撑流体列。

我没有太多代码可以提供，但我会创建一些示例供参考。

提前谢谢 - 我觉得问这个有点愚蠢，但我已经有几年不用考虑网络了，现在我觉得自己落后了。

<div class="row-fluid">
    <div class="span3"></div>
</div>

<div id="row-fixed">
    <div class="span6"></div>
</div>

<div id="row-fluid">
    <div class="span3"></div>
</div>

【问题讨论】：

标签： jquery css twitter-bootstrap layout

【解决方案1】：

这让我想起了过去……十多年前，我们看到了很多车架组。您可以只给出一个框架宽度 =“*”，它会占用页面上剩余的宽度。我真希望今天的 CSS 能提供同样的功能……但是，它没有。

您可以轻松地使用 js、css 和 html 来模拟效果。

HTML：

<div class="container">
     <div class="sidebar pull-left">

     </div>
     <div class="sidebar pull-right">

     </div>
     <div class="main-content">

     </div>
</div>

JS：（在 Mac OSX 中测试 - Chrome 版本 29.0.1547.65）http://jsfiddle.net/mmME5/

function setSidebarWidth(){
    var container_width = $('.container').width();
    var main_content_width = $('.main-content').width();

    //init sidebars
    $('.sidebar').width((container_width - main_content_width)/2);

    return;
}

$(function(){
    //init at document ready
    setSidebarWidth();

    //resize listener
    $(window).resize(function(){
        setSidebarWidth();
    });
});

注意：您可能需要在 js 函数中使用 .outerWidth(true)，具体取决于您的 div 是否有边距。

然后按照您认为合适的方式设置您的高度、背景、边框等。

如果你有任何运气，请告诉我。

【讨论】：