twitter-bootstrap - 如何在 Bootstrap 中创建以下 3 col 布局？

Question

如何创建以下 3col 布局，其中每个左内容和右内容（不是导航样式）都是固定的，并且主要的中间内容可以包含一个英雄（或任何内容）。

变化：

1. 中间内容随页面宽度调整大小
2. 中间内容是固定的最大宽度

需要同时测试，因为图表和其他小部件正在中间内容视图中，并且需要查看它们对固定大小的反应或允许拉伸。

变体 1 - 中间内容调整大小

• 初始加载

• 页面调整大小..缩小，因此正文（Hello World）自动调整。

任何信息都非常感谢！

Answer 1

对于全屏布局，您必须使用一个根本不是引导网格布局的容器，因为它将是响应式的，因此您的容器将在屏幕分辨率允许的情况下进行调整......

使用 div 和 css：-

.table { position:relative; }
.column { }
.column.left { position:absolute; left:0; top:0; width:300px; height:100%; }
.column.hero { margin:0 300px; }
.column.right { position:absolute; right:0; top:0; width:300px; height:100%; }

html:-

<div class="table">
    <div class="column left">Left Sidebar</div>
    <div class="column hero">Hero Layout</div>
       <div class="column right">Right Sidebar</div>
</div>

演示：- http://jsfiddle.net/VTwnt/1/

谢谢希望对你有用...