/ / Pasek boczny o stałej szerokości z kolumną responsywnej treści w Fundacji 5? - zurb-foundation, fixed, wrap, sidebar

Pasek boczny o stałej szerokości z kolumną responsywnej treści w Fundacji 5? - zurb-foundation, fixed, wrap, sidebar

Używam Fundacji od wersji v3 i nie spodziewałem się tego typu snafu.

W tym konkretnym przypadku potrzebuję lewej kolumny o stałej szerokości (duże-3), a następnie kolumny treści płynnej / reagującej (duże-9) na pozostałą część.

<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>

Problem polega na tym, że podczas skalowania w dół kolumna zawartościjest owijanie / wymuszanie poniżej paska bocznego (nawet przed przekroczeniem następnego progu szerokości ekranu). Próbowałem "naprawionych" i "lepkich" klas w #tym pasku, ale wydaje się, że nie wpływają na to zachowanie.

Nie chciałem rozpocząć hackowania CSS, jeśli istniało istniejące (Foundation?) Rozwiązanie.

Jakakolwiek rada?

Odpowiedzi:

7 dla odpowiedzi № 1

Podobnie jak w przypadku podejścia @naota, odpowiedzią, którą otrzymałem od Zurb, było zhackowanie css. Ustaw całkowicie pozycjonowany pasek boczny o stałej szerokości, a następnie utwórz nowy element div z lewym dopełnieniem: 300px;

Coś jak:

<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>

Działa zaskakująco dobrze ... na hack.


4 dla odpowiedzi nr 2

Oto, czego używam w SASS do tworzenia stałych szerokości kolumn.

Kod

@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);
}
}

Korzystanie z kodu

Aby wstawić stałą, 300px, prawą kolumnę, dodaj @include fixed(300, right); do prawej kolumny i @include fluid(300, left); do lewej kolumny. Nie mieszaj z ustawieniem domyślnym small-# column klasy.

Rozszerzanie kodu

Jeśli chcesz ustawić stałe klasy, podobnie jak small-3 column, large-6 column, itp., po prostu dodaj następujący kod. Teraz będziesz mógł używać large-fluid-300-left dla lewej kolumny cieczy i large-fixed-300-right dla prawej ustalonej kolumny.

// 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); }
}

Jeśli będziesz pracować z reklamami, prawdopodobnie nadejdziew punkcie, w którym będziesz potrzebował kolumny, aby zwinąć się w swoim rzędzie, gdy osiągnie określoną minimalną szerokość. Oto, czego używam do ustawienia minimalnej szerokości kolumny.

Kod

@mixin min($width) {
width: $width + px;
float: left;
box-sizing: content-box;
+ .column {
float: left;
}
}

Korzystanie z kodu

Dodaj @include min(300); do klasy kolumn. Musi być używany jako dodatek do column klasa.

Rozszerzanie kodu

Poniższy kod umożliwia dodawanie klas, takich jak .small-min-300.column do kolumn, które chcesz zwinąć, jeśli są wyciśnięte poniżej 300 pikseli.

// 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); }
}

Wyciągnąłem to bezpośrednio z mojego pliku SASS i nie testowałem kodu w czasie pisania. Daj mi znać, jeśli coś nie działa zgodnie z oczekiwaniami.


3 dla odpowiedzi nr 3

Zmierzyłem się z podobnym problemem. Poniższy kod używa display:table aby zawinąć twój kod na dwie części.

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>

Mam nadzieję że to pomoże.


0 dla odpowiedzi nr 4

Na wypadek, gdyby ktoś niedawno znalazł ten stary artykułpróbując znaleźć sposób na utworzenie kolumny o stałej szerokości w Fundacji, mogłem to zrobić za pomocą Fundacji 6. Korzystam z Flex-Grid, a tam jest wspaniała klasa zwana .shrink. Zmniejszenie spowoduje, że kolumna będzie tylko tak szeroka jakto jest zawartość, więc możesz mieć element tam, jak element nawigacji lub obraz, a kolumna pozostanie na tej szerokości, ponieważ inna kolumna dookoła zajmuje całą pozostałą przestrzeń.Jestem w stanie zrobić środkową kolumnę o stałej szerokości. :

<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>

Oficjalna strona dokumentu dla Fundacji .shrink klasa: https://codepen.io/ZURBFoundation/pen/aWYVgd