CSS Bootstrap 流体布局 - 侧边栏的固定宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9589333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap fluid layout - fixed width of sidebar
提问by Jens
i have a fluid layout based of twitters bootstrap.
我有一个基于 twitters bootstrap 的流畅布局。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
It would be very nice to have the sidebar a fixed width. if a change the layout from fluid to "static" and set the width of sidebar to
侧边栏的宽度固定会非常好。如果将布局从流体更改为“静态”并将侧边栏的宽度设置为
220px
and i resize the window or change my resolution to 1024... the body-content jumps under the sidebar. how can i avoid this?
然后我调整窗口大小或将分辨率更改为 1024...正文内容跳到侧边栏下方。我怎样才能避免这种情况？
EDIT: Got it. Will post my "solution" later on. thanks for your responses
编辑：明白了。稍后会发布我的“解决方案”。感谢您的回复
回答by Bart Calixto
I think you are looking something like this:
我想你看起来像这样：
<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>
here′s a fiddle for your convenience: http://jsfiddle.net/TT8uV/2/
为了您的方便，这里有一个小提琴：http: //jsfiddle.net/TT8uV/2/
As as general note:
作为一般说明：
You don′t need to use bootstrap as your 'main container', so you can place your sidebar side-by-side with a grid system (like bootstrap fluid and responsive). This way you have A LOTof control of the sidebar, without affecting the actual content.
您不需要使用引导程序作为您的“主容器”，因此您可以将侧边栏与网格系统（如引导程序流体和响应式）并排放置。这样，你有很多侧栏的控制权，而不会影响实际的内容。
Hope it works for you.
希望对你有效。
回答by Yiannis Gkoufas
I think this is what you need: http://jsfiddle.net/U8HGz/1/
我认为这就是你所需要的：http: //jsfiddle.net/U8HGz/1/
