1

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

变化：

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

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

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

  • 初始加载

在此处输入图像描述

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

在此处输入图像描述

任何信息都非常感谢！

4

1 回答 1

2

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

使用 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/

谢谢希望对你有用...

于 2013-06-25T06:58:57.527 回答