但我读过很多其他的)
我正在尝试为我的投资组合网站创建一个流动-固定-流动的布局。我在网上尝试了几种不同的选择,但我看到的每个人都提供了固定-流体-固定或将两个流体列放在一边的布局。
我希望有一个直截了当的 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>
最佳答案
这让我想起了……十多年前我们看到很多框架集的日子。你可以只给一个框架 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 是否有边距。
然后按照您认为合适的方式设置您的高度、背景、边框等样式。
如果你有任何运气,请告诉我。
关于jquery - 使用 Bootstrap 的流体固定流体布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18604815/