自举流体布局 - 固定宽度的侧边栏

我有一个基于twitters bootstrap的流体布局。自举流体布局 - 固定宽度的侧边栏

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span2"> 
      <!--Sidebar content--> 
     </div> 
     <div class="span10"> 
      <!--Body content--> 
     </div> 
    </div> 
</div>

这将是非常不错的侧边栏固定宽度。如果改变从流体到“静态”的布局和设置侧边栏的宽度

220px

，我调整窗口大小或更改分辨率为1024 ...体内含量的侧边栏下的跳跃。我如何避免这种情况？编辑：明白了。稍后将发布我的“解决方案”。感谢您的答复

来源

2012-03-06 Jens

你可以使用像[jsfiddle]（http://jsfiddle.net）这样的测试用例吗？无法完全理解您在此寻找的效果。 – 2012-03-06 19:04:55

+13

那么......你的这个着名的“解决方案”是什么？ :) – 2012-03-20 09:58:38

是的，发布您的解决方案，我也有兴趣，固定宽度的边栏与其余的页面流体......我无法完成 – 2012-10-31 16:15:04

我觉得这是你所需要的：http://jsfiddle.net/U8HGz/1/

来源

2012-03-07 10:25:12

nope，因为侧边栏固定在位。我的右行/容器宽度约为3000-4000像素。所以如果我向右滚动侧边栏总是在顶部。但感谢您的回复 – Jens 2012-03-07 14:56:20

我认为你正在寻找这样的事情：

<div class="sidebar span4"> 
    this is my fixed sidebar 
</div> 
<div class="main"> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span2">this is fluid</div> 
      <div class="span3 offset1">yeah!</div> 
      <div class="span6">Awesome!</div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span6">1 half</div> 
      <div class="span6">2 half</div> 
     </div> 
    </div> 
</div>

这里'山拨弄为了您的方便：http://jsfiddle.net/TT8uV/2/

正如一般说明：

你不需要使用bootstra p作为您的“主要容器”，因此您可以将您的侧栏与网格系统（如引导程序流体和响应）并排放置。这样您就可以控制边栏，而不会影响实际内容，因此您有A批次。

希望它适合你。

来源

2013-03-06 01:26:20

这是解决固定宽度的唯一答案。其他人是关于固定位置。 +1 – r03 2013-03-30 19:17:25

我很欣赏这种尝试，但问题是，右手边的第二行漂浮着低于右侧边栏的底部。注意'1 half'和'2 half'（它们是第二行中的跨度 - 主导航中的流体）在它下面浮动：http://jsfiddle.net/TT8uV/2/show/ – 2013-04-24 17:50:02

我不认为这必须与解决方案，但无论哪种方式我更新溢出：自动到行在这里：http://jsfiddle.net/TT8uV/35/或者你可以postion：绝对侧边栏http://jsfiddle.net/TT8uV/36/ – 2013-04-25 16:11:18

自举流体布局 - 固定宽度的侧边栏

回答

相关问题