twitter-bootstrap 流畅的 twitter 引导程序布局，左侧和右侧（侧边栏）具有最小宽度的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16287477/
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
Fluid twitter bootstrap layout with min-width columns on left and right (sidebars)
提问by Thomas233
I need to create a page layout like in the following illustration with twitter bootstrap:
我需要使用 twitter bootstrap 创建如下图所示的页面布局：
The left and right sidebars should have a width of at least lets say 300px. If there is more space they can grow but they should not shrink (elsewhere navigation links will get cut).
The middle column should fill the entire space left.
左右边栏的宽度至少应该是 300 像素。如果有更多空间，它们可以增长但不应缩小（其他地方的导航链接将被切断）。中间的列应该填满整个左边的空间。
I have tried it by assigning a min-width to the sidebar spans, but in this case the last sidebar (b) will switch to the next line if the browser content area width gets below 1300px. I`m not using responsive twitter bs css.
我已经尝试通过为侧边栏跨度分配一个最小宽度来尝试它，但在这种情况下，如果浏览器内容区域宽度低于 1300 像素，最后一个侧边栏 (b) 将切换到下一行。我没有使用响应式 twitter bs css。
Is there a way to avoid this ? I have already found some approaches, but only without bootstrap, which do not work for me.
有没有办法避免这种情况？我已经找到了一些方法，但只是没有引导程序，这对我不起作用。
As the site I am talking about is already running I will not paste code here but please take a look at it live at http://kunden.tommy-computer.at/fsv_noetsch/(german)
由于我所说的网站已经在运行，我不会在此处粘贴代码，但请在http://kunden.tommy-computer.at/fsv_noetsch/（德语）上实时查看它
Thank you for your help !
谢谢您的帮助 ！
Best regards, Thomas
最好的问候，托马斯
回答by Zim
If you use Bootstrap 2 responsive you can do something with fixed sidebars on the left and right.
如果您使用 Bootstrap 2 响应式，您可以使用左右固定的侧边栏做一些事情。
<div class="row-fluid">
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
<div class="span6">
main content
</div>
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
</div>
example: http://bootply.com/60284
You can decrease/increase the spanX accordingly if you want sidebars narrower/wider etc..
如果您希望侧边栏更窄/更宽等，您可以相应地减少/增加 spanX。
回答by Thomas233
finally found a very well working solution (for me) here also at StackOverflow: How do I get a three column layout with Twitter Bootstrap?
终于在 StackOverflow 上找到了一个非常有效的解决方案（对我来说）：How do I get aThree column layout with Twitter Bootstrap?
Anyway thank you very much for your help guys !
无论如何，非常感谢你们的帮助！
回答by drip
You are using a grid system, so you should stick with the given grids widths. (even tought 99% of my clients who wants their design to be coded with bootstrap never respect the grid system and use random width, that kills the point of using a grid system)
您正在使用网格系统，因此您应该坚持使用给定的网格宽度。（即使我的 99% 的客户希望他们的设计使用引导程序编码，他们也从不尊重网格系统并使用随机宽度，这会扼杀使用网格系统的意义）
If you change the width for one grid you must change it for the other too or it won't fit. (a.k.a you must edit the .span8 width to fit the content).
如果您更改一个网格的宽度，则必须也更改另一个网格的宽度，否则将不适合。（也就是您必须编辑 .span8 宽度以适应内容）。
