html - बूटस्ट्रैप 3 बूटस्ट्रैप 4 कोल्स को अब क्षैतिज रूप से संरेखित नहीं किया गया है




css bootstrap-4 (2)

इस सवाल का पहले से ही यहाँ एक जवाब है:

im बूटस्ट्रैप 4 की ओर पलायन कर रहा है, हालांकि Ive ने 3 से 4 तक मेरे पृष्ठों के लिए बूस्ट-मिन.स्कैप्स को स्वैप किया है और मेरे कॉलम अब सभी लंबवत संरेखित हैं जहाँ तक मैं देख सकता हूँ कि कॉलम सही हैं।

मैंने परीक्षण करने के लिए एक जेएस फिडेल का भी उपयोग किया और उन सभी को वहां भी लंबवत होने के लिए दोहराने में सक्षम हूं। क्या कोई मुझे सही दिशा में इंगित कर सकता है, कैसे ive प्रलेखन को पढ़ने के लिए https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match यह काम करना चाहिए

<div class="row">
    <div class="col-12">
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
    </div>
</div>

https://jsfiddle.net/aq9Laaew/4791/


आप frist col-xs-12 को हटाते हैं

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-2">
    <h1>TEST</h1>
  </div>
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-4">
    <h1>TEST</h1>
  </div>
</div>


चूंकि बूटस्ट्रैप 4 ग्रिड संरचना फ्लेक्सबॉक्स पर आधारित है , इसलिए आपको row और col ग्रिड का उपयोग सावधानी से करना होगा। यहां .col-12 div की जरूरत नहीं है, बस अपने .col-2 को एक पंक्ति में लपेटें। इसके अलावा .container वर्ग के अंदर अपने .row को लपेटें

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
  </div>
</div>

या यदि आप .col-12 div को हटाना नहीं चाहते हैं, तो .col-2 तत्वों को लपेटने के लिए दूसरी पंक्ति का उपयोग करें जो बेकार है (बस आपको ग्रिड संरचना की अवधारणा दिखाने की कोशिश कर रहा है)।

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </div>
</div>





bootstrap-4