jquery - 使用 Bootstrap 的流体固定流体布局

Question

但我读过很多其他的)

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

我希望有一个直截了当的 1024 像素的中间(内容)部分，旁边有两个支持流体柱。

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

提前致谢 - 我觉得问这个问题有点愚蠢，但我已经有几年没有考虑过网络了，现在我感觉落后了很多。

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

Answer 1

这让我想起了……十多年前我们看到很多框架集的日子。你可以只给一个框架 width="*"，它会占用页面上剩余的宽度。我真的希望今天的 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 是否有边距。

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

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