1

I need to create a page layout like in the following illustration with twitter bootstrap:

sidebar-content-sidebar 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.

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.

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)

Thank you for your help !

Best regards, Thomas

4

3 回答 3

4

如果您使用 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>

示例：http ://bootply.com/60284

如果您希望侧边栏更窄/更宽等，您可以相应地减少/增加 spanX。

相关
Bootstrap 4 圣杯布局

于 2013-04-29T20:27:27.290 回答
2

终于在 StackOverflow 上找到了一个非常有效的解决方案（对我来说）： 如何使用 Twitter Bootstrap 获得三列布局？

无论如何，非常感谢你们的帮助！

于 2013-06-10T17:40:34.930 回答
0

您正在使用网格系统，因此您应该坚持使用给定的网格宽度。（甚至 99% 的客户希望他们的设计使用 bootstrap 进行编码，他们从不尊重网格系统并使用随机宽度，这会扼杀使用网格系统的意义）

如果您更改一个网格的宽度，您也必须更改另一个网格的宽度，否则它将不适合。（也就是你必须编辑 .span8 宽度以适应内容）。

于 2013-04-29T20:37:04.573 回答