固定布局位置:固定侧边栏 [英] Fixed layout position:fixed sidebar

问题描述

我正在尝试创建一个位置:使用引导程序固定侧边栏，但我还没有取得任何成功.我的尝试基本上可以概括为:

<div class="row"><div class="span3">
<div class="span9">

并将span3列的位置设置为固定，并尝试各种不同的css位置.然而，它似乎打破了span9的大小和定位.

我的尝试完全错误吗?还是我完全错过了什么?

谢谢！

解决方案

无法使用 twitter bootstrap 或 css 将整个页面居中对齐.

但可以使用一些 jquery.

函数大小(){var windowwidth=$(window).width();var containerwidth=$('.container').width();var diff=windowwidth-containerwidth+40;$('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);如果(差异> 0){$('#leftmargin').css('margin-left', (diff/2) +'px');} 别的 {$('#leftmargin').css('margin-left', '20px');}}$(document).ready(sizing);$(window).resize(sizing);

并添加 id="leftmargin" 如下所示(向右滚动):

<div class="span3" style="position:fixed;background-color:green;height:100%;top:0px;"id="leftmargin">定位固定导航栏(超出 .container)

<div class="容器"><div class="row"><div class="span3" style="background-color:red">为空以避免溢出</div><div class="span9 offset3" style="background-color:blue;">bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla