/ Странична лента с фиксирана ширина с колона за отзивчиво съдържание в Фондация 5? - zurb-foundation, фиксирана, обвивка, странична лента

Странична лента с фиксирана ширина с колона за отзивчиво съдържание в Фондация 5? - 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>

Проблемът е, при мащабиране, съдържанието на колонатасе обвива / натиска надолу под страничната лента (дори преди да се премине следващият праг на ширината на екрана). Опитах "фиксирани" и "лепкави" класове в #sidebar, но те не изглежда да повлияят на това поведение.

Не исках да започвам да хакна CSS, ако съществуваше решение (Foundation?).

Някакъв съвет?

Отговори:

7 за отговор № 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>

Тя работи изненадващо добре ... за рак.


4 за отговор № 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 към колоните, които искате да се свият, ако са натиснати под 300 пиксела.

// 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 да обвиете кода си на две части.

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>

Надявам се това да помогне.


0 за отговор № 4

В случай, че наскоро някой намери тази стара статияопитвайки се да намеря начин да има колона с фиксирана ширина във Фондацията, успях да направя това с Фондация 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