如何使用3col固定布局堆叠左侧导航栏？

如何将导航栏放在海誓山盟之上给予以下小提琴？如何使用3col固定布局堆叠左侧导航栏？

这是Photoshop处理的红色，但它是我想要实现 enter image description here

我已经尝试了包装两个堆叠中和，但没有去什么。

<div class="???"> 
     <div class="well sidebar-nav left"> 
     <ul class="nav nav-list"> 
      // o o o 
     </ul> 
     </div> 
     <div class="well sidebar-nav left"> 
     <ul class="nav nav-list"> 
      // o o o 
     </ul> 
     </div> 
    </div>

来源

2013-07-18 JaJ

这样的脚手架是否适合您？
http://www.bootply.com/68303

基本上两个左侧NAV块是在相同的跨度，右手NAV是在它自己的跨度，并且中央块处于嵌套容器。

我相信你会想要进一步定制这个，尽管如果你尽可能地使用标准引导网格，所有东西都会在狭窄的屏幕上堆叠和缩放。

祝你好运！

来源

2013-07-18 03:07:35

太棒了！这工作。检查这个小提琴 - > http://jsfiddle.net/GwCkp/18/。但是，现在我将主容器的宽度（第一行.html）设置为1300px。这很好用，但我怎样才能更优雅地调整中间部分。我需要中间部分（英雄和内容保持不低于640像素，因为在那里会有一个图表与其他小部件，所以我想要修复它）。设置该英雄单位或父容器流体的宽度没有似乎工作。谢谢！ – JaJ

另外，你知道如何减少导航栏之间以及导航栏和主要英雄单位之间的空白吗？包含单位之间的主要缓冲区空间？（即我希望左侧导航栏右边距更接近 – JaJ

由于某种原因，这个布局是一个中间的调整大小的野兽，我只想让中间的容器停留在650，整个容器保持在1100px以内，也许我在这里错过了一些东西，在引导程序和流体/响应/静态布局中没有看到很多好处。表很容易使用，但我确定我在这里丢失了一些东西，因为这是我第一次使用引导程序。 – JaJ

如何使用3col固定布局堆叠左侧导航栏？

回答

相关问题