/ / फाउंडेशन 5 में उत्तरदायी सामग्री कॉलम के साथ फिक्स्ड चौड़ाई साइडबार? - ज़र्ब-नींव, फिक्स्ड, रैप, साइडबार

फाउंडेशन 5 में उत्तरदायी सामग्री कॉलम के साथ फिक्स्ड-चौड़ाई साइडबार? - ज़र्ब-नींव, फिक्स्ड, रैप, साइडबार

मैं 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>

समस्या, स्केलिंग करते समय, सामग्री कॉलम हैलपेटना / साइडबार के नीचे मजबूर होना (अगली स्क्रीन-चौड़ाई सीमा पार होने से पहले भी)। मैंने # साइडबार में "निश्चित" और "चिपचिपा" वर्गों की कोशिश की लेकिन वे इस व्यवहार को प्रभावित नहीं करते हैं।

यदि कोई मौजूदा (फाउंडेशन?) समाधान था तो मैं सीएसएस को हैक करना शुरू नहीं करना चाहता था।

कोई सलाह?

उत्तर:

उत्तर № 1 के लिए 7

@ नोटा के दृष्टिकोण की तरह, ज़र्ब से मिली प्रतिक्रिया सीएसएस को हैक करना था। एक पूरी तरह से स्थित, निश्चित चौड़ाई वाली साइडबार सेट करें, फिर बाएं-पैडिंग के साथ एक नया 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

निश्चित कॉलम चौड़ाई बनाने के लिए मैं एसएएसएस के साथ क्या उपयोग करता हूं।

कोड

@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 उन स्तंभों के लिए जिन्हें आप पतन करना चाहते हैं, अगर वे 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); }
}

मैंने इसे सीधे अपनी एसएएसएस फ़ाइल से खींच लिया है और लिखने के समय कोड का परीक्षण नहीं किया है। अगर मुझे कुछ उम्मीद के अनुसार काम नहीं करता है तो मुझे बताएं।


जवाब के लिए 3 № 3

मुझे एक समान समस्या का सामना करना पड़ा। नीचे दिया गया कोड उपयोग करता है display:table अपने कोड को दो भागों में लपेटने के लिए।

सीएसएस:

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

एचटीएमएल:

<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 के साथ करने में सक्षम था। मैं फ्लेक्स-ग्रिड का उपयोग कर रहा हूं, और वहां एक अद्भुत कक्षा है .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