/ / Postranná lišta s pevnou šírkou so stĺpcom s citlivým obsahom v nadácii 5? - zurb-základ, pevný, zábal, bočný panel

Postranná lišta s pevnou šírkou so stĺpcom s citlivým obsahom v nadácii 5? - zurb-základ, pevný, zábal, bočný panel

Používam nadáciu už od v3 a tak som neočakával takýto pokus.

V tomto konkrétnom prípade potrebujem ľavý stĺpec s pevnou šírkou (veľký-3), potom stĺpec obsahujúci kvapalinu / citlivý obsah (veľký-9) pre zvyšok.

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

Problémom je pri zužovaní nadol stĺpec s obsahomje zabalený / zatlačený pod bočný panel (ešte pred prekročením prahu šírky ďalšej šírky obrazovky). Pokúsil som sa o "fixné" a "lepkavé" triedy v # sidebar, ale zdá sa, že to neovplyvňujú toto správanie.

Nechcel som začať hackovať CSS, ak by existovalo už existujúce (Foundation?) Riešenie.

Akákoľvek rada?

odpovede:

7 pre odpoveď č. 1

Rovnako ako pri prístupe @naota, odpoveď, ktorú som dostala od Zurbu, bola hacking css. Nastavte absolútne umiestnenú bočnú lištu s pevnou šírkou a potom vytvorte nový div s ľavým polstrovaním: 300px;

Niečo ako:

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

Funguje to prekvapivo ... pre hack.


4 pre odpoveď č. 2

Tu je to, čo používam so SASS na vytvorenie pevných šírok stĺpcov.

kód

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

Používanie kódu

Ak chcete vložiť pevný, 300px, pravý stĺpec, pridajte @include fixed(300, right); do triedy pravého stĺpca a @include fluid(300, left); do ľavého stĺpca. Nemiešajte s predvoleným small-# column triedy.

Rozšírenie kódu

Ak chcete nastaviť trvalé triedy, podobne ako small-3 column, large-6 column, atď., pridajte nasledujúci kód. Teraz budete môcť používať large-fluid-300-left pre ľavý stĺpec a large-fixed-300-right pre správny pevný stĺpec.

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

Ak pracujete s reklamami, pravdepodobne prídetev mieste, kde budete potrebovať stĺpec, aby sa zbalil do svojho vlastného riadku, ak dosiahne určitú minimálnu šírku. Tu používam nastavenie minimálnych šírok stĺpcov.

kód

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

Používanie kódu

pridať @include min(300); do triedy stĺpcov. Musí byť použité okrem column trieda.

Rozšírenie kódu

Nasledujúci kód vám umožňuje pridať triedy, ako napr .small-min-300.column do stĺpcov, ktoré chcete zbaviť, ak sú všetky stlačené pod 300 pixelov.

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

Vybral som to priamo z môjho súboru SASS a nebol testovaný kód v čase písania. Dajte mi vedieť, či niečo nefunguje podľa očakávania.


3 pre odpoveď č. 3

Mala som podobnú záležitosť. Použije sa kód uvedený nižšie display:table zabaliť kód do dvoch častí.

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>

Dúfam, že to pomôže.


0 pre odpoveď č. 4

V prípade, že niekto nedávno našiel tento starý článokpokúšam sa nájsť spôsob, ako mať v nadácii stĺpec s pevnou šírkou, mohol som to urobiť s nadáciou 6. Používam Flex-Grid a je tu nádherná trieda nazvaná .shrink, Shrink vytvorí stĺpec len tak široký akoto je obsah, takže môžete mať prvok tam ako položka nav alebo obrázok, a stĺpec bude zostať, že šírka ako ďalší stĺpec okolo zabrať zostávajúceho priestoru.I som mohol urobiť strednej stĺpce s pevnou šírkou tak :

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

Oficiálna stránka dokumentácie nadácie pre .shrink trieda: https://codepen.io/ZURBFoundation/pen/aWYVgd