मैं खिंचाव करने की कोशिश कर रहा हूँ .black ब्राउज़र के बाईं ओर कॉलम की काली पृष्ठभूमि। मुझे यकीन नहीं है कि कंटेनर को द्रव कंटेनर में सेट किए बिना इसे कैसे पूरा किया जाए।
क्या इसे करने का कोई तरीका है? मैं द्रव कंटेनर से परहेज कर रहा हूं, क्योंकि सामग्री को निश्चित चौड़ाई में होना चाहिए।
उत्तर:
उत्तर № 1 के लिए 1यह कंटेनर मार्कअप के बाद और कंटेनर रिश्तेदार बनाने के बाद काले पृष्ठभूमि के साथ एक बिल्कुल स्थित डिवी कंटेनर जोड़कर हासिल किया जा सकता है।
एचटीएमएल
<div class="container relative">
<div class="col-md-3 black fill"></div>
सीएसएस
.relative {
position: relative;
}
.fill {
position: absolute;
top:0;
left:-25%;
height:100%;
}
यहाँ एक काम कर रहा है उदाहरण.
explaination
- बिल्कुल स्थानांतरित तत्व मूल रूप से HTML दस्तावेज़ में तैरते हैं और शीर्ष, बाएं, दाएं, नीचे मानों के आधार पर ब्राउज़र विंडो के अनुसार स्वयं को स्थिति देते हैं।
- हालांकि अगर एक बिल्कुल स्थित तत्व के पूर्वजों को अपेक्षाकृत स्थान दिया जाता है, तो पूरी तरह से स्थित तत्व स्वयं को स्थान देते हैं सापेक्ष माता-पिता कंटेनर और इस प्रकार
relativeबूटस्ट्रैप कंटेनर के लिए सीएसएस वर्ग। - चूंकि पूरी तरह से स्थित div की चौड़ाई 25% है
col-md-3कक्षा और बूटस्ट्रैप कंटेनर के बाएं हाशिए के लिए क्षतिपूर्ति करने के लिए, हम एक का उपयोग करते हैं नकारात्मक हमारे बिल्कुल स्थित div के लिए 25% का बायां मूल्य। - बूटस्ट्रैप कंटेनर ऊंचाई पर काले पृष्ठभूमि कंटेनर को स्नैप करने के लिए 100% की ऊंचाई आवश्यक है।
उपरोक्त सीएसएस स्टाइल गुण सही ढंग से संयुक्त होने पर वांछित परिणाम दे सकते हैं।