मैं इसके बूटस्ट्रैप ग्रिड का निर्माण करके एक उत्तरदायी वेबपेज बनाने की कोशिश कर रहा हूं, लेकिन घंटों खोज और कोशिश करने के बाद, मैं हमेशा कहीं नहीं जाता।
यहाँ मेरा कोड नीचे है:
<div class="row">
<div class="col-md-2" align="center">
<div class="d-flex flex-column">
<h1 class="border">A</h1>
<h1 class="border">B</h1>
<h1 class="border">C</h1>
</div>
</div>
<div class="col-md-7 col-sm-9 border" align="center">
<h1>D</h1>
</div>
<div class="col-md-3 col-sm-3 border" align="center">
<h1>E</h1>
</div>
</div>
COL-MD पहले ही किया जा चुका है, जैसा कि नीचे दिया गया है:
मैं यहां जो संघर्ष कर रहा हूं वह इसे नीचे जैसा बनाना है जब यह COL-SM . होगा
मुझे यह वास्तव में कठिन लगता है, मैंने ऑफसेट आदि की कोशिश की है, लेकिन मुझे सही नहीं मिल रहा है। कोई मेरी मदद कर सकता है कि इसे कैसे प्राप्त किया जाए?
0
25 जून 2020, 11:12
1 उत्तर
सबसे बढ़िया उत्तर
आपको एबीसी को पूर्ण चौड़ाई के रूप में परिभाषित करने के लिए col-sm-12 जोड़ना चाहिए जब डिस्प्ले छोटा हो और col-md-12 एबीसी को परिभाषित करने के लिए कंटेनर में प्रत्येक "पूर्ण चौड़ाई" हो, जब डिस्प्ले मध्यम हो, तो इसे दिखना चाहिए इस तरह:
<div class="row">
<div class="col-md-2 col-sm-12" align="center">
<div class="row">
<h1 class="border col-md-12 col-sm-4">A</h1>
<h1 class="border col-md-12 col-sm-4">B</h1>
<h1 class="border col-md-12 col-sm-4">C</h1>
</div>
</div>
<div class="col-md-7 col-sm-9 border" align="center">
<h1>D</h1>
</div>
<div class="col-md-3 col-sm-3 border" align="center">
<h1>E</h1>
</div>
JS-Fiddle: http://jsfiddle.net/79onzx0r/
आउटपुट है:
1
25 जून 2020, 11:56