`col-xs- *` बूटस्ट्रैप 4 में काम नहीं कर रहा है

169

मैंने पहले इसका सामना नहीं किया है, और मुझे समाधान खोजने की कोशिश में बहुत कठिन समय हो रहा है। जब बूटस्ट्रैप में माध्यम के बराबर एक स्तंभ हो तो ऐसा करना:

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

पाठ-संरेखण ठीक काम करता है:

लेकिन जब स्तंभ को छोटे जैसे अतिरिक्त बनाते हैं:

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

फिर पाठ-संरेखण अब काम नहीं करता है:

क्या कुछ बूटस्ट्रैप अवधारणा है जो मुझे समझ में नहीं आ रही है या यह वास्तव में एक त्रुटि है जैसे मुझे लगता है कि यह है। मेरे पास यह मुद्दा कभी नहीं था, क्योंकि मेरे पाठ ने हमेशा एक्स के साथ अतीत में गठबंधन किया है। किसी भी तरह की सहायता का स्वागत किया जाएगा। यहाँ मेरा पूरा कोड है:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

— YoungCoder
स्रोत

7

col-xs-*अब नवीनतम v4 रिलीज़ में मौजूद नहीं है, इसलिए आप इसे देख रहे हैं। col-xs-12अपने तरह 100% की चौड़ाई सेट नहीं है col-md-12। सब कुछ देखने के लिए DevTools की जाँच करें और इस Pull को

— vanburen

436

col-xs-*बूटस्ट्रैप 4 के पक्ष में गिरा दिया गया है col-*।

के col-xs-12साथ बदलें col-12और यह उम्मीद के मुताबिक काम करेगा।

साथ ही नोट col-xs-offset-{n}को offset-{n}v4 में बदल दिया गया ।

— ताओ
स्रोत

8

इसके बारे में कभी सोचा / जाना भी नहीं होगा! बहुत बहुत धन्यवाद।

— यंग्कोडर

12

हमेशा डॉक्स की जांच करें । हैप्पी कोडिंग! ::} <((* (*> ::

— ताओ

8

यह वह चीज नहीं है जिसके लिए आप सामान्य रूप से डॉक्स की जांच करेंगे। मैं सभी डॉक्स पर था और यह भी याद किया। मैंने सोचा था कि अब दो bs4 साइट माइग्रेशन पर, वह कॉल जेनेरिक के लिए था, और col-xs विशिष्ट होगा, हालांकि hindight में इसका कोई मतलब नहीं है, क्योंकि पहले मोबाइल, xs और up होना सामान्य (डिफ़ॉल्ट) है। अनुस्मारक के लिए धन्यवाद, मुझे लगता है कि मैंने अपने अंतिम प्रवास के दौरान स्किम किया था, लेकिन इस पर इस पर अटक गया था।

— बम

1

एक बात हालांकि आंद्रेई; क्या यह केवल "xs" है जिसे गिरा दिया गया है, या अन्य लोग भी हैं?

— फंक फोर्टी निनेर

2

V3 और v4 के बीच क्या बदला है, इस बारे में कृपया इस उत्तर को पढ़ें । और यह भी एक उपकरण का लिंक है, क्या आपको इस तरह जाने का निर्णय लेना चाहिए। यह एक आसान काम नहीं है और IMHO यह आसान टेम्पलेट पर काम करने के लिए आसान है और बस मार्कअप बदलने की तुलना में php डालें।

— ताओ

21

मुझे बस आश्चर्य था, col-xs-6मेरे लिए काम क्यों नहीं किया लेकिन फिर मुझे बूटस्ट्रैप 4 प्रलेखन में जवाब मिला। अतिरिक्त छोटे उपकरणों के लिए वर्ग उपसर्ग अब col-जबकि पिछले संस्करणों में था col-xs।

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

बूटस्ट्रैप 4 ने सभी col-xs-*वर्गों को गिरा दिया , इसलिए col-*इसके बजाय उपयोग करें । उदाहरण के लिए col-xs-6द्वारा बदल दिया col-6।

— साबिर हुसैन
स्रोत

2

आप ऐसा कर सकते हैं, यदि आप पुराने वाक्यविन्यास का उपयोग करना चाहते हैं (या हर टेम्पलेट को फिर से लिखना नहीं चाहते हैं)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— wiwolavida
स्रोत

2

उन्होंने XS को गिरा दिया क्योंकि बूटस्ट्रैप को एक मोबाइल-पहला विकास उपकरण माना जाता है। यह डिफ़ॉल्ट माना जाता है xs और इसलिए इसे परिभाषित करने की आवश्यकता नहीं है।

— SMWalker
स्रोत

1

में बूटस्ट्रैप 4.3 , कॉल-xs- {value} सहयोगियों {value} ने ले ली है

Sm, md, lg, xl में कोई परिवर्तन नहीं है ।

.col- {value}
.col-sm- {value}
.col-md- {value}
.col-lg- {value}
.col-xl- {value}

— दोरजी कर्म
स्रोत

-1

बूटस्ट्रैप 4 ग्रिड col-xs- * वर्ग।

बूटस्ट्रैप में 4 ग्रिड कक्षाएं अलग-अलग दृश्य के लिए या समान हैं।

यदि आप .col-xs- * वर्ग का उपयोग करना चाहते हैं।

तो, यह वर्ग मोबाइल दृश्य के लिए काम कर रहा है।

अंतर देखने के लिए आप इस कोड को नीचे आज़मा सकते हैं और अंतर देख सकते हैं। फिर, अपने कोड में इस वर्ग का उपयोग करें।

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— भगति परमार
स्रोत

Col-xs को बूटस्ट्रैप 4 में गिरा दिया गया है

— Warred

कृपया, इसे एक लिंक पर देखें: bitdegree.org/learn/… *% 20in% 20your% 20code।

— ०२