/ / Foundation 5の反応的なコンテンツ列を含む固定幅のサイドバー? - zurb-foundation、固定、ラップ、サイドバー

Foundation 5の反応的なコンテンツ列を持つ固定幅のサイドバー? - zurb-foundation、固定、ラップ、サイドバー

私はv3以降Foundationを使用していましたので、この種の不具合を予期していませんでした。

この特定のケースでは、固定幅の左欄(大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で "fixed"と "sticky"クラスを試しましたが、この動作には影響していないようです。

既存の(Foundation?)ソリューションがあれば、CSSのハッキングを開始したくありませんでした。

何かアドバイス?

回答:

回答№1の場合は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>

それは驚くほどうまく動作します...ハックのために。


回答№2については4

ここでは、固定列幅を作成するために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);
}
}

コードの使用

固定の300ピクセル、右の列を挿入するには、 @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ファイルからこれを直接取り出して、書面の時点でコードをテストしなかった。何かが期待通りに動かないかどうか教えてください。


回答№3の場合は3

私も同様の問題に直面した。以下のコードは、 display:table コードを2つの部分にラップします。

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>

お役に立てれば。


回答№4の場合は0

誰かがこの古い記事を最近見つけた場合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