5

मैं कोणीय 4, बूटस्ट्रैप 4 का उपयोग कर रहा हूं और एक निश्चित स्क्रोल करने योग्य दायां div और एक निश्चित बाएं div को कार्यान्वित करने का प्रयास कर रहा हूं। यह Trulia के समान होना चाहिए।बूटस्ट्रैप 4, उत्तरदायी में कॉलम निश्चित और सही स्क्रॉल करने योग्य कैसे छोड़ा जाए?

बूटस्ट्रैप ने संस्करण 4 में एफ़िक्स jQuery प्लगइन गिरा दिया है, इसलिए यह विधि अब मान्य नहीं है, वे स्थिति का उपयोग करने की सलाह देते हैं: चिपचिपा, लेकिन मैं इसे काम करने के लिए नहीं मिल सकता।

कृपया मदद करें!

index.html

<div class="container-fluid"> 
    <div class="row h-100"> 
    <div class="col-md-6"> 
     <div id="left-container"> 
     <div class="search-property"> 
      <input type="text"> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div id="right-container"> 
     <app-home-right></app-home-right> 
     </div> 
    </div> 
    </div> 
</div> 

style.css

#left-container { 
    height: 100%; 

    position: fixed; 
    width: inherit; 
} 

#right-container { 
    position: absolute; 
} 

.search-property { 
    position: relative; 
    top: 50%; 
    transform: perspective(1px) translateY(-50%); 
    margin-left: 50%; 
} 

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
} 

.border { 
    border: 1px solid black; 
} 

उत्तर

4

मैं अगर आप बस 1 तय पक्ष के साथ एक लेआउट चाहते हैं यकीन नहीं है, या पक्ष के लिए जब तक यह तक पहुँच जाता है जिन्हें ठीक करने की पाद लेख (ट्रुलिया की तरह)।

यहां निश्चित बाएं तरफ (स्प्लिट 50 50) के साथ एक साधारण लेआउट है।

body, html { 
    height: 100%; 
} 

#left { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 

https://www.codeply.com/go/IuOp3nvCpyenter image description here

(या चिपचिपा) केवल एक विशिष्ट बिंदु पर पक्ष तय करने के लिए, position:sticky सभी ब्राउज़र में बहुत अच्छी तरह से काम नहीं करता। यहां बताए मैं एक प्लगइन या polyfill का उपयोग करेंगे: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4


इसी के साथ fixed col on right side

+0

मैं चला गया पर एक खोज प्रपत्र होगा और मैं इस उत्तरदायी (पर सही div के शीर्ष पर होना करने की जरूरत है मोबाइल)। मैं उसको कैसे करू? –

+0

स्तंभों और मीडिया क्वेरी पर ग्रिड कक्षाओं का उपयोग केवल इस तरह की बड़ी चौड़ाई पर तय करने के लिए करें: https://www.codeply.com/go/pqzJB4thBY – ZimSystem

+0

जो काम करता है! धन्यवाद! –

संबंधित मुद्दे