在Foundation 6中固定宽度的侧边栏不折叠

Question

我正在设计一种固定侧边栏尺寸的布局，因为我们的设计不能很好地处理该元素上的挤压，但是可以处理主要内容的挤压（侧边栏将充满不同的nav元素）。 我在这里听Miko的建议。 我知道这是针对Foundation 5的，但是它工作得很好，除了我必须向所有行添加collapse类。 我仍然希望通过基础来维护我的排水沟。 我创建了一个示例布局，并用一堆不同的颜色对其进行了测试。

 .section { max-width: 400px; margin: 0 auto; position: relative; } @media (max-width: 600px) { .section { max-width: 1024px; } .section.sidebar-left { padding-left: 335px; } } .sidebar { position: absolute; min-width: 335px; top: 0; } .sidebar.sidebar-left { left: 0; } 

 <div class="section sidebar-left story-grid"> <div class="sidebar show-for-large sidebar-left" style="height: 100%; background-color: green;">Sidebar</div> <div class="row collapse" style="background-color: orange;"> <div class="row collapse" style="height: 50px; background-color: blue;">Full Width</div> <div class="row collapse"> <div style="height: 50px; max-width: 355px; background-color: pink;">Fixed Width</div> </div> <div class="row collapse"> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> </div> <div class="row collapse"> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> </div> <div class="row collapse"> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> </div> <div class="row collapse"> <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> </div> <div class="row collapse"> <div class="columns small-6" style="height: 50px; background-color: darkcyan;">6 Columns</div> <div class="columns small-6" style="height: 50px; background-color: darkcyan;">6 Columns</div> </div> </div> </div> 

story-grid类除了更改字体颜色并为演示目的添加一些高度外，什么也不做。 结果是这样的：

这几乎是我想要的，除了-我仍然想要装订线。 如果我删除collapse类，它看起来像这样：

我将鼠标悬停在内容部分，以显示内部网格系统如何溢出父级边界。 那么，如何在不塌陷的情况下获得高于目标的结果？

Answer 1

我能够使它工作。 清除所有内容的collapse ，并将其添加到您的CSS .row .row { margin: 0; } .row .row { margin: 0; }

Foundation在嵌套行上增加了一个负边距，并且它随着屏幕宽度的变化而变化，但是我想这完全取决于您要实现的目标。

我也将您的帖子从@media max-width: 600px为min-width: 600px ，因为它看起来不像您的屏幕截图。