基础5中具有响应内容列的固定宽度侧边栏?

cbm*_*trx 4 sidebar fixed zurb-foundation

自从v3开始我一直在使用基金会,所以我没想到会有这种混乱.

在这种特殊情况下,我需要一个固定宽度的左列(大3),然后是剩余的流体/响应内容列(大9).

<div class="row">

    <div class="large-3 columns" id="sidebar" style="width: 300px">
    sidebar
    </div>

    <div class="large-9 columns" id="content">
    content
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

问题是,缩小时,内容列在侧边栏下方包裹/被强制下降(甚至在超过下一个屏幕宽度阈值之前).我在#sidebar中尝试了"固定"和"粘性"类,但它们似乎不会影响此行为.

如果存在(Foundation?)解决方案,我不想开始破解CSS.

有什么建议?

cbm*_*trx 7

就像@ naota的方法一样,我从Zurb得到的回应就是破解css.设置一个绝对定位的固定宽度侧边栏,然后用左边填充创建一个新的div:300px;

就像是:

<div class="row">

    <div id="sidebar" style="position: absolute; width: 300px;">
    </div>

    <div class="large-12 columns" id="content" style="padding-left: 300px">
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

它的效果非常好......对于黑客来说.