Question

我正在制作一个修复侧边栏大小的布局，因为我们的设计不能很好地处理该元素的挤压，但会处理主要内容的挤压（侧边栏会有一个充满不同导航元素的手））。我遵循Miko here的建议。我知道这是基础5，但它工作得很好，除了我必须将collapse类添加到我的所有行。我仍然希望通过基础维护我的排水沟。我创建了一个带有一堆不同颜色的示例布局来测试它。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

除了更改字体颜色并为演示目的添加一些高度外，story-grid类不会执行任何操作。结果如下：

这几乎正是我想要的，除了 - 我仍然想要排水沟。如果我删除collapse类，它看起来像这样：

我将鼠标悬停在内容部分上，以显示内部网格系统是如何溢出其父级边界的。那么如何在不破坏我的排水沟的情况下获得上面的结果呢？

Answer 1

我能够让它发挥作用。从所有内容中删除collapse并将其添加到您的css .row .row { margin: 0; }

基金会在嵌套行上添加一个负余量，它会随着屏幕宽度的变化而变化，但是根据你想要达到的目标，我认为这样就可以了。

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

基础6中的固定宽度侧边栏没有折叠

1 个答案: