बूटस्ट्रैप में कॉलम की निश्चित स्थिति बनाएं


83

बूटस्ट्रैप का उपयोग करते हुए, मेरे पास एक ग्रिड स्तंभ वर्ग = "col-lg-3" है जिसे मैं इसे स्थिति में रखना चाहता हूं: फिक्स्ड जबकि अन्य .col-lg-9 सामान्य स्थिति है (पृष्ठ के माध्यम से स्क्रॉल-सक्षम)।

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

LifeHacker.com में बाएं कॉलम की तरह ही आप देखेंगे कि बाएं भाग को तय किया गया है, हालांकि मैं पृष्ठ पर स्क्रॉल करता हूं।

मैं बूटस्ट्रैप v3.1.1 का उपयोग करता हूं


@Lowkase मैंने अनुरोध के अनुसार कोड संलग्न किया है।

1
"होल्ड पर" विषय को हटाए जाने की प्रतीक्षा की जा रही है। : इस बीच में आप मेरा उत्तर यहाँ देख सकते हैं jsfiddle.net/dRbe4 । प्रश्न को फिर से खोलने के बाद मैं इसे बेहतर तरीके से समझा सकता हूं।
लोकेस

जवाबों:


87
<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>

3
निश्चित रूप से पसंदीदा समाधान अब!
स्कॉट

12
यह छोटे स्क्रीन पर ठीक से काम नहीं करता है, दायाँ भाग लेफ्ट कर्नल के ऊपर होगा जिसमें fixeddiv
thefoxrocks

12
बूटस्ट्रैप 4 ?? किसी भी विचार
PirateApp

22
बूटस्ट्रैप 4 में, '
चिपका

3
जानकारी के लिए: बूटस्ट्रैप ने बूटस्ट्रैप 4.0 के साथ एफिक्स के लिए समर्थन को गिरा दिया। यहां बताए अनुसार
एंटोनी डेलिया

50

इहाब के जवाब पर ध्यान केंद्रित करते हुए, बस का उपयोग करके position:fixedऔर बूटस्ट्रैप col-offsetआपको चौड़ाई पर विशिष्ट होने की आवश्यकता नहीं है।

<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>

5
यदि आप कॉलम की स्थिति को बदलते हैं तो यह काम नहीं करता है
didando8a

यह एक बेहतर उपाय है! सही काम और कोई सीएसएस की जरूरत है। @ didando8a यदि आप कॉलम की स्थिति बदलते हैं, तो केवल कॉल-lg-ऑफ़सेट को एक नए ऑफ़सेट में बदलें।
रॉय शोए 12

अगर किसी को भी निर्धारित कॉलम में स्क्रॉलिंग एबिलिटी की जरूरत है, तो बस ऊंचाई और अतिप्रवाह जोड़ें। उदा style="position:fixed;height:100%;overflow-y:auto;"
रॉय शोए

7
@ "कोई सीएसएस की जरूरत नहीं है" - हाँ, यह स्टाइल टैग में इसका सही
अर्थ है

4
यह वही है जो मुझे चाहिए था! ध्यान दें कि बूटस्ट्रैप 4 में ऑफ़सेट क्लासेस अलग हैं, उदा offset-lg-3getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
nickwesselman

29

यहाँ समाधान के बाद http://jsfiddle.net/dRbe4/ ,

<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>

मैंने कुछ सीएसएस को सही काम करने के लिए संशोधित किया:

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

धन्यवाद @Lowkase समाधान साझा करने के लिए।


10
क्या चौड़ाई विशेषता निर्दिष्ट किए बिना एक ही परिणाम होना संभव है?
ADIMO

1
मुझे लगता है कि यह स्पष्ट रूप से स्पष्ट होना चाहिए, लेकिन मुझे यह काम करने के लिए नहीं मिल सकता है ... मैं बाईं ओर स्क्रॉल करने योग्य स्तंभ और दाईं ओर निश्चित कॉलम चाहता हूं। मेरे फिक्स्ड कॉलम में केवल एक लेबल होता है, लेकिन किसी कारण से जब मैं इन कक्षाओं को सेट करता हूं, तो लेबल कॉलम में होने के बजाय ऊपरी-बाएं कोने में "चिपक जाता है"। मैंने बिना किसी लाभ के स्टाइल विशेषताओं के सभी विभिन्न संयोजनों की कोशिश की है। एक पॉइंटर की सराहना करेंगे :)
रीड

1
@ReidBelton Jsfiddle साझा करें ताकि मैं आपको कोड के साथ मदद कर सकूं।

@ IhabAbdel-रहीम प्रस्ताव के लिए बहुत बहुत धन्यवाद! हालांकि जरूरी नहीं है क्योंकि मैंने इस परियोजना को आश्रय दिया है।
रीड

मैंने ऐसा ही किया लेकिन जब मैं निश्चित वर्ग जोड़ रहा हूँ तो यह गायब हो गया है। कृपया मदद करे।
अर्पण

21

बूटस्ट्रैप 3 में class="affix"काम करता है, लेकिन बूटस्ट्रैप 4 में यह नहीं है। मैंने बूटस्ट्रैप 4 में इस समस्या को हल किया class="sticky-top" ( position: fixedसीएसएस का उपयोग करने की अपनी समस्याएं हैं)

कोड कुछ इस तरह होगा:

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>

उत्तम। position-fixedस्तंभ की छड़ी को शीर्ष पर बनाने के लिए भी काम किया, हालांकि स्तंभ की सामग्री बह निकली। sticky-topतय हो गया कि
मैक्सपज

11

बूटस्ट्रैप 4 के लिए अपडेट किया गया

बूटस्ट्रैप 4 में अब position-fixedइस उद्देश्य के लिए एक वर्ग शामिल है ताकि अतिरिक्त CSS की कोई आवश्यकता न हो ...

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>

https://www.codeply.com/go/yOF9csaptw


1
यदि मैं आपके उदाहरण के अनुसार करता हूं, तो "col-lg-3" कॉलम की सामग्री अपने माता-पिता से बाहर चली जाती है। बोहुत अजीब! (इसमें और अधिक पाठ डालने का प्रयास करें)। यह एक बग होना चाहिए ...
ThePhi

1
यह सामान्य नहीं है क्योंकि स्थिर स्थिति तत्व सामान्य DOM प्रवाह से हटा दिए जाते हैं । यह मूल प्रश्न के दायरे से बाहर है, लेकिन निश्चित तत्व पर विशिष्ट आकार निर्धारित करना होगा।
ज़िम

2
इसके कारण कॉलम एक-दूसरे को ओवरलैप कर सकते हैं
ChumiestBucket

1
मेरे मामले में इस स्थिति को परिभाषित करने के रूप में पसंद किया गया था: कॉल-एलजी -3 डीवाई के लिए निश्चित स्टाइलिंग ने आंतरिक बच्चों के तत्वों के कर्सर को डिफ़ॉल्ट (एफएक्स पॉइंटर के बजाय) के रूप में डिफ़ॉल्ट रूप से दिखाए जाने का कारण बना।
१18:

4

इसका उपयोग करें, मेरे लिए काम करता है और छोटे पर्दे के साथ समस्याओं को हल करता है।

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>

2

बूटस्ट्रैप 4 के साथ बस कोल-ऑटो का उपयोग करें

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>

1
मेरे लिए काम नहीं किया। दोनों कॉलम अपेक्षा के अनुसार स्क्रॉल करते हैं।
चुमिएस्टबकेट

1
@star_trac कुछ सीएसएस जोड़ने की कोशिश करनी चाहिए, मदद करनी चाहिए: .container-fluid { flex: 1; }
stefanitsky
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.