奖金 - 设置最小宽度

Question

我从第3季开始就一直在使用基金会，所以我没想到会出现这样的问题。

在这种特殊情况下，我需要一个固定宽度的左列（大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中尝试了“固定”和“粘性”类，但它们似乎不会影响此行为。

如果存在（基础？）解决方案，我不想开始破解CSS。

Answer 1

就像@ 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>

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

Answer 2

这是我使用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文件中提取了这个，并且在编写时没有测试过代码。如果某些事情无法按预期发挥作用，请告诉我。

Answer 3

我遇到了类似的问题。下面的代码使用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>

希望这有帮助。

Answer 4

如果有人最近发现这篇旧文章试图在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

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

4 个答案:

代码

使用代码

扩展代码

奖金 - 设置最小宽度

代码

使用代码

扩展代码