自从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>
问题是，缩小时，内容列在侧边栏下方包裹/被强制下降（甚至在超过下一个屏幕宽度阈值之前）。我在#sidebar尝试了“固定”和“粘性”类，但它们似乎并没有影响这种行为。
如果存在（Foundation？）解决方案，我不想开始破解CSS。
就像@ 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创建固定列宽的方法。
@mixin fixed($width, $direction) {
position: absolute;
width: rem-calc($width) + $column-gutter;
top: 0;
@if $direction == left {
left: 0;
} @else {
right: 0;
}
}
@mixin fluid($width, $direction) {
@if $direction == left {
padding-right: rem-calc($width) + ($column-gutter * 1.5);
} @else {
padding-left: rem-calc($width) + ($column-gutter * 1.5);
}
}
要插入固定的300px右列，请将@include fixed(300, right);添加到右列类，将@include fluid(300, left);添加到左列类。不要与默认的small-# column类混合使用。
如果您想设置永久类，与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); }
}
如果您正在使用广告，则可能会遇到一个问题，一旦达到某个最小宽度，您就需要将列折叠到自己的行中。这是我用来设置最小列宽的方法。
@mixin min($width) {
width: $width + px;
float: left;
box-sizing: content-box;
+ .column {
float: left;
}
}
将@include min(300);添加到列类。必须在column类之外使用。
以下代码允许您将类（例如.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文件中提取了这个，并且在编写时没有测试过代码。如果某些内容无效，请告诉我。
我遇到了类似的问题。下面的代码使用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>
HTML：
<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>
希望这可以帮助。
如果有人发现这篇旧文章最近试图找到一种方法在Foundation中找到一个固定宽度的列，我就可以用Foundation 6做到这一点。我正在使用Flex-Grid，并且有一个很棒的类叫做.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>
.shrink类的官方基金会文档页面：https://codepen.io/ZURBFoundation/pen/aWYVgd