बूटस्ट्रैप 4 उत्तरदायी उपयोगिताओं दृश्यमान / छिपे हुए xs sm lg काम नहीं कर रहे हैं

96

नई उत्तरदायी उपयोगिताओं के साथ कोई समस्या छिपी / दिखाई देने वाली कक्षाएं , जब बूटस्ट्रैप 4 की ओर पलायन हो रहा हो । मुझे पता है कि .hidden- कक्षाओं को v3 से हटा दिया गया है और उसके साथ बदल दिया गया है .hidden-*-up .hidden-*-down। नई .hidden-*-up.hidden-*-downकक्षाओं का उपयोग करना लेकिन तत्व दृश्यमान / छिपे हुए में नहीं बदल रहे हैं। पता नहीं क्यों कर सकते हैं।

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

* स्क्रीन के आकार (सफारी, उत्तरदायी डिजाइन मोड) की परवाह किए बिना इस उदाहरण में कुछ भी छिपा नहीं है

— Yatko
स्रोत

2

और आपका सवाल है कि क्या है? stackoverflow.com/help/how-to-ask

— Rob

@ रोब मेला;) बदल गया।

— यतो

आपको मार्कअप का एक न्यूनतम उदाहरण पोस्ट करने की आवश्यकता है जिससे समस्या पैदा हो: न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण हमारे पास कोई सुराग नहीं है कि "तत्व" क्या हैं।

— रोब

बूटस्ट्रैप 4 और आपके HTML उदाहरण वाले कोडपेन को सेटअप करें: codepen.io/esr360/pen/prWjYv । "स्क्रीन आकार की परवाह किए बिना" इस उदाहरण में कुछ भी छिपा नहीं है, आपका दावा गलत है।

— ईएसआर

@ EdmundReed हाँ, यह मुझे पागल कर देता है: मैंने एक सरल उदाहरण के साथ कोशिश की, मेरे मैक पर काम करता है, सिंक के ठीक बाद काम करना बंद कर देता है ... कैश की कोशिश की, यहां तक कि किसी भी कैशिंग को अलग करने के लिए एक अलग आईएसपी

— यतको

227

बूटस्ट्रैप के साथ 4 .hidden-* कक्षाएं पूरी तरह से हटा दी गई थीं (हां, उन्हें बदल दिया गया था hidden-*-*लेकिन उन कक्षाओं को भी v4 अल्फाजों से हटा दिया गया है)।

V4-beta से शुरू करके, आप समान परिणाम प्राप्त करने के लिए गठबंधन कर सकते हैं .d-*-noneऔर .d-*-blockकक्षाएं लगा सकते हैं ।

visible- * हटा दिया गया था और साथ ही; स्पष्ट .visible-*कक्षाओं का उपयोग करने के बजाय , इसे न छिपाकर तत्व को देखें (फिर से, .d-none -d-md-block) के संयोजनों का उपयोग करें। यहाँ काम कर रहे उदाहरण है:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs"बन जाता है class="d-none d-sm-block"(या डी-डी-एसएम-इनलाइन-ब्लॉक ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

बूटस्ट्रैप 4 उत्तरदायी उपयोगिताओं का एक उदाहरण :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

codepen.io/_yatko/pen/ZJXQxy

प्रलेखन

— Yatko
स्रोत

1

इसका कारण जो मुझे नहीं मिला, वह v4 बीटा कुछ दिनों पहले प्रकाशित हुआ था और सभी Google-अनुक्रमित परिणाम अभी भी आपको v4- अल्फा में लाते हैं, किसी तरह मुझे नया CDN लिंक मिला लेकिन बाकी सभी अभी भी उपलब्ध थे

— यत्को

2

मैं "d" = मान लेता हूं display।

— user20232359723568423357842364 2

16

वे इस तरह के एक अनजाने, परिवर्तन को क्यों पेश करेंगे? कोई स्पष्टीकरण?

— szaman

3

@rrrafalsz मैंने उसी चीज़ के बारे में सोचा है। ऐसा लगता है कि पिछले "दृश्य-स्म-अप / डाउन" से एक अनावश्यक रूप से जटिल कदम है, जो वे अल्फा में थे। इसकी वजह जानना दिलचस्प होगा।

— कटाई

क्या आप अपने उदाहरण में स्पष्ट रूप से टिप्पणी कर सकते हैं कि कौन से DIV दिखाई देंगे और कौन से नहीं हैं? मुझे थोड़ी देर लगी, और मुझे यकीन नहीं है, अगर मैं इसे टिप्पणी करता हूं, अगर यह सही होगा। धन्यवाद

— हेल

51

स्क्रीन साइज क्लास

-

सब पर छिपे हुए .D-नन
केवल xs .d-none -d-sm-block पर छिपा हुआ
केवल sm .d-sm-sm-none -d-md-block पर छिपा हुआ
केवल md .d-md-none -d-lg-block पर छिपा हुआ
केवल lg .d-lg-none -d-xl-block पर छिपा हुआ
केवल xl .d-xl-none पर छिपा हुआ
सभी .d- ब्लॉक पर दिखाई देता है
केवल xs .d- ब्लॉक .d-sm-none पर ही दिखाई देता है
केवल smd .d-none -d-sm-block .d-md-none पर दिखाई देता है
केवल md .d-none -d-md-block .d-lg-none पर दिखाई देता है
केवल lg .d-none -d-lg-block .d-xl-none पर दिखाई देता है
केवल xl .d-none -d-xl-block पर दिखाई देता है

इस लिंक को देखें http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4.5 लिंक: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— विनोद चौहान
स्रोत

1

जब भी यह सैद्धांतिक रूप से प्रश्न का उत्तर दे सकता है, तो यहां उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर होगा ।

— रिक

6

बूटस्ट्रैप 4 (^ बीटा) ने उत्तरदायी छुपा / दिखाने वाले तत्वों के लिए कक्षाएं बदल दी हैं। उपयोग करने के लिए सही कक्षाओं के लिए यह लिंक देखें: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

— jross
स्रोत

2

धन्यवाद। बूटस्ट्रैप पुरानी सामग्री को कम से कम संग्रह करने के लिए हटा सकता है ताकि कुल नोक (जैसे खुद) को स्टैक पर इस उत्तर को खोजने से पहले संभावित 123523532 संभावित समाधान न जाना पड़े। पिछले कुछ वर्षों से, स्टैक ओवरफ़्लो Google की तुलना में अधिक उपयोगी है, इसलिए जब लोग कहते हैं कि Google का उपयोग करें ... मैं कहता हूं कि नहीं, स्टैक का उपयोग करें .. तेज़ और अधिक उपयोगी।

— ब्लू

0

कुछ संस्करण काम कर रहे हैं

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>

— असीम इशा
स्रोत