Zurb foundation 固定宽度侧栏与响应内容栏在基金会5？ 自从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>

边栏
内容

问题是，缩小时，内容列在侧边栏下方被环绕/强制向下（甚至在下一个屏幕宽度阈值被跨越之前）。我在

#侧栏中尝试了“固定”和“粘性”类，但它们似乎并不影响这种行为

如果有一个现有的（基础？）解决方案，我不想开始破解CSS。
我也遇到了类似的问题。下面的代码使用
display:table
将代码包装为两部分

CSS：

<style type="text/css">
.wrapper_table{
    display: table;
    width:100%;
}
.wrapper_row{
    display:table-row;
    vertical-align:top;
 }
.wrapper_cell{
    display:table-cell;
    vertical-align:top;
}
</style>

<section class="wrapper_table">
    <div class="wrapper_row">
        <div class="wrapper_cell">
            <!-- your side bar is here -->
            <div class="columns" id="sidebar" style="width:300px;">
            sidebar
            </div>
        </div>
        <div class="wrapper_cell">
            <div class="row">
                <!-- your content is here -->
                <div class="large-12 columns" id="content" >
                    content content content content content
                    content content content content content 
                </div>
            </div>
        </div>
    </div> 
</section>


.u表{
显示：表格；
宽度：100%；
}
.罗夫街{
显示：表格行；
垂直对齐：顶部；
}
.包装盒{
显示：表格单元格；
垂直对齐：顶部；
}

HTML：

<style type="text/css">
.wrapper_table{
    display: table;
    width:100%;
}
.wrapper_row{
    display:table-row;
    vertical-align:top;
 }
.wrapper_cell{
    display:table-cell;
    vertical-align:top;
}
</style>

<section class="wrapper_table">
    <div class="wrapper_row">
        <div class="wrapper_cell">
            <!-- your side bar is here -->
            <div class="columns" id="sidebar" style="width:300px;">
            sidebar
            </div>
        </div>
        <div class="wrapper_cell">
            <div class="row">
                <!-- your content is here -->
                <div class="large-12 columns" id="content" >
                    content content content content content
                    content content content content content 
                </div>
            </div>
        </div>
    </div> 
</section>


边栏
内容内容
内容内容

希望这能有所帮助。
就像@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>



对于黑客来说，它工作得出奇地好。
以下是我使用SASS创建固定列宽的方法

代码
使用代码
要插入固定的300px右列，请添加
@include fixed（300，右）到右侧列类，并且
@包括流体（300，左侧）到左列类。不要与默认的
small-#列混用

扩展代码
如果您想设置永久类，类似于
small-3-column
、
large-6-column
等，只需添加以下代码。现在，您可以对左侧流体柱使用
large-fluid-300-left
，对右侧固定柱使用
large-fixed-300-right

// Fixed 300px
.row { position: relative; }
@media #{$small-up} {
  .small-fixed-300-left.column { @include fixed(300, left); }
  .small-fixed-300-right.column { @include fixed(300, right); }
  .small-fluid-300-left.column { @include fluid(300, left); }
  .small-fluid-300-right.column { @include fluid(300, right); }
}
@media #{$medium-up} {
  .medium-fixed-300-left.column { @include fixed(300, left); }
  .medium-fixed-300-right.column { @include fixed(300, right); }
  .medium-fluid-300-left.column { @include fluid(300, left); }
  .medium-fluid-300-right.column { @include fluid(300, right); }
}
@media #{$large-up} {
  .large-fixed-300-left.column { @include fixed(300, left); }
  .large-fixed-300-right.column { @include fixed(300, right); }
  .large-fluid-300-left.column { @include fluid(300, left); }
  .large-fluid-300-right.column { @include fluid(300, right); }
}

奖金-设置最小宽度
如果您使用的是广告，您可能会遇到这样一个问题，即当列达到某个最小宽度时，您需要将其折叠到自己的行中。下面是我用来设置最小列宽的内容

代码
使用代码
添加
@包括最小值（300）到列类。必须在
列
类之外使用

扩展代码
下面的代码允许您将类（例如
.small-min-300.column
）添加到希望折叠的列中，如果这些列的压缩量低于300px

// Min 300px
@media #{$small-up} {
  .small-min-300.column { @include min(300); }
}
@media #{$medium-up} {
  .medium-min-300.column { @include min(300); }
}
@media #{$large-up} {
  .large-min-300.column { @include min(300); }
}

我直接从我的SASS文件中提取了这个代码，在编写时还没有测试过代码。让我知道，如果事情没有按照预期执行。
 < P>如果有人发现这篇旧文章最近试图找到一种方法，有一个固定宽度列在基金会，我能够做到这一点与基金会6。我正在使用Flex网格，有一个很棒的类叫做
.shrink
。“收缩”将使列的宽度与其内容的宽度相同，因此可以在其中包含一个元素，如导航项目或图像，并且列将保持该宽度，因为其周围的其他列将占用剩余空间。我可以这样做一个固定宽度的中心柱：

<div class="row">
  <div class="columns"></div>
  <div class="shrink columns">
    This will shrink to it's contents - set a width on something here!
  </div>
  <div class="columns"></div>
</div>


这将缩小到它的内容-在这里设置一个宽度的东西！

<官方基础文档页>代码>缩写< /代码>类：
我想在你现有的内容中添加以下内容：这还不错，但如果页面很宽，那么内容上会有额外的填充。知道怎么修理吗？我把div放在行外，因为在行中它是不可点击的，并且它粘在行的左边缘而不是页面的左边缘。我不记得有过这个问题，但自从我做了所有这些之后已经有一段时间了。也许将300px转换为两者的相对百分比？否则，我会尝试右对齐/浮动边栏内容div，这样它总是与右边的列相反（反之亦然）。有人用新的Flex Flex网格来试试吗？