/ / Бічна панель з фіксованою шириною зі стовпцем адаптивного контенту в "Фонді 5"? - zurb-foundation, фіксований, обгортка, бічна панель

Бічна панель із фіксованою шириною зі стовпцем адаптивного контенту у програмі Foundation 5? - zurb-foundation, фіксований, обгортка, бічна панель

Я використовую Фундацію починаючи з візиту 3, і тому я не очікував такого роду snafu.

У цьому конкретному випадку мені потрібна ліва стовпця з фіксованою шириною (велика 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, якщо існує існуюче (Foundation?) Рішення.

Будь поради?

Відповіді:

7 для відповіді № 1

Багато в чому подібно до підходу "@naota", відповідь, яку я отримав від Zurb, була зламати css. Встановити абсолютно-позиційну бічну панель із фіксованою шириною, а потім створити нову діб з лівою панеллю: 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);
}
}

Використання коду

Щоб додати фіксований, 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 до стовпчиків, які ви хочете згорнути, якщо вони кожен стиснутий нижче 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>

Офіційна сторінка doc doc для .shrink клас: https://codepen.io/ZURBFoundation/pen/aWYVgd