ठीक है, आप सभी शायद w3schools के नए w3-css के बारे में जानते होंगे। W3-css लिंक मैं w3-css के साथ कुछ हैंडसन कर रहा था, ऐसा लगता है कि उनके ग्रिड कॉलम में कुछ गड़बड़ है।

जाहिर है इसकी तुलना बूटस्ट्रैप से की जाएगी। जबकि बूटस्ट्रैप में जब आप किसी कॉलम को खाली रखते हैं तो वह केवल स्थान घेरता है लेकिन w3-css में ऐसा नहीं होता है।

तो w3-css लोगों को अपना कॉलम खाली नहीं छोड़ने के लिए मजबूर कर रहा है अन्यथा यह आपके लेआउट को खराब कर देगा।

इसका संभावित समाधान क्या हो सकता है।

प्लंकर फ्राइडनली पीपीएल उर लिंक यहां है PLUNKER

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <h4>Filled column with w3-css</h4>

  <div class="w3-row">
    <div class="w3-col m4 w3-grey">1</div>
    <div class="w3-col m8 w3-red">4</div>

  </div>

  <h4>empty column with w3-css</h4>
  <h5>You cant keep your column empty??? You have to keep something in it. otherwise it want occupy any space. </h5>
  <div class="w3-row">
    <!-- Making first column emty   -->
    <div class="w3-col m4 w3-grey"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>Filled column with Bootstrap css</h4>

  <div class="row">
    <div class="col-sm-4" style="background-color:red;">12123</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>

  <h4>empty column with Bootstrap css</h4>

  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>

</body>

</html>
4
ankitd 19 अप्रैल 2017, 12:59

3 जवाब

इसे इस्तेमाल करे <div class="w3-col m4 w3-container"></div>

w3-container padding सहित एक खाली टेबल बनाएगा।

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

  <h4>Filled column</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey">1</div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>empty column</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>not empty column</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey"> </div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>Filled column with w3-container</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey w3-container">1</div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>empty column with w3-container</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey w3-container"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>not empty column with w3-container</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey w3-container"> </div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>empty column with w3-container no background color</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-container"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
</body>

</html>
3
Moth 13 सितंबर 2017, 07:58
3
ओपी और इस प्रश्न पर आने वाले अन्य लोगों के लाभ के लिए, क्या आप यह समझाने में सक्षम हैं कि यह समाधान प्रश्न का उत्तर क्यों देता है?
 – 
stealththeninja
13 सितंबर 2017, 05:53

@GCyrillus द्वारा उत्तर अन्य दृष्टिकोण है लेकिन यह प्रदर्शन को प्रभावित कर सकता है।

बूटस्ट्रैप केवल min-height: 1px; का उपयोग करता है जो कॉलम खाली होने पर ढहने से रोकता है।

position: relative;
//this min-height prevents collapsing when column is empty
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
0
ankitd 25 जुलाई 2017, 14:26
<div class="w3-container">
  <div class="w3-row">
    <div class="w3-col m4"><h4></h4></div>
    <div class="w3-col m4"></div>
  </div>
</div>

मैं अंतरिक्ष बनाने के लिए कॉल में h4 जोड़ता हूं इसलिए अंतरिक्ष बनाने के लिए कोई भी html टैग जोड़ें

-2
Tajni 16 मई 2020, 09:53