मैं इसके बूटस्ट्रैप ग्रिड का निर्माण करके एक उत्तरदायी वेबपेज बनाने की कोशिश कर रहा हूं, लेकिन घंटों खोज और कोशिश करने के बाद, मैं हमेशा कहीं नहीं जाता।

यहाँ मेरा कोड नीचे है:

<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 पहले ही किया जा चुका है, जैसा कि नीचे दिया गया है:

enter image description here


मैं यहां जो संघर्ष कर रहा हूं वह इसे नीचे जैसा बनाना है जब यह COL-SM . होगा

enter image description here

मुझे यह वास्तव में कठिन लगता है, मैंने ऑफसेट आदि की कोशिश की है, लेकिन मुझे सही नहीं मिल रहा है। कोई मेरी मदद कर सकता है कि इसे कैसे प्राप्त किया जाए?

0
schutte 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/

आउटपुट है:

enter image description here

enter image description here

1
gecko 25 जून 2020, 11:56