बूटस्ट्रैप 4 के साथ एक निश्चित साइडबार लेआउट कैसे बनाएं?
मैं स्क्रीनशॉट बूटस्ट्रैप 4 का उपयोग की तरह एक लेआउट बनाने के लिए कोशिश कर रहा हूँ, लेकिन मैं साइडबार तय कर रहे हैं और एक ही समय में इस लेआउट को प्राप्त करने के साथ कुछ समस्या आ रही है।
एक बुनियादी उदाहरण के साथ जा रहे हैं:
<div class="container">
<div class="row">
<div class="col-m-4" id="sticky-sidebar">
Sidebar
</div>
<div class="col-m-8" id="main">
Main Area
</div>
</div>
</div
यह इस लेआउट प्राप्त करना संभव है लेकिन चीजों को मुश्किल हो एक बार मैं घोषणा: एक बार मैं साइडबार चिपचिपा बनाने
.sidebar {
position: fixed // or absolute
}
, मुख्य div के आगे साइडबार के बजाय दिखाई देने लगते हैं। बेशक कुछ मार्जिन घोषित करना और इसे वापस मूल स्थिति में धक्का देना संभव है लेकिन यह प्रतिक्रियाओं के लिए चीजों को जटिल बनाता है।
मुझे लगता है कि मुझे कुछ याद आ रहा है, मैंने बूटस्ट्रैप 4 दस्तावेज पढ़ा लेकिन मुझे इस लेआउट को प्राप्त करने का एक आसान तरीका नहीं मिला।
आप अपने साइडबार सामग्री के लिए कुछ lorem ipsum जोड़ देते हैं तो आप देख सकते हैं कि मेरी प्रारंभिक समस्या यह स्निपेट में निर्मित हो जाता है। चूंकि हम एक निश्चित स्थिति घोषित कर रहे हैं, साइडबार ग्रिड सिस्टम का सम्मान करना बंद कर देता है। – cinnaroll45
मैंने साइडबार – GvM
पर जोड़ा गया 'अधिकतम चौड़ाई: 20% 'कोड संपादित किया है, हां, अधिकतम चौड़ाई को कंटेनर घोषित करने से समस्या ठीक हो जाती है। धन्यवाद! – cinnaroll45