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

Question

但我读了很多其他的)

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

我喜欢有一个直截了当的1024px的中间(内容)部分，旁边有两个支持流体的列。

我没有太多的代码可以提供，但我将为go by创建一些示例。

提前感谢-我觉得问这个问题有点傻，但我已经有几年没有考虑过web了，现在我觉得自己落后了很多。

<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

这让我想起了十年前的day...over，那时我们看到了很多框架集。你可以只给一个框架width="*“，它将占用页面上剩余的宽度。我真希望今天的CSS能提供same...but，但它没有。

你可以很容易地用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 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是否有余量。

然后设计你的高度，背景，边框等等。只要你觉得合适。

如果你有什么好消息就告诉我。