गायब दिखाई दे रहा है - ** और छिपा हुआ - ** बूटस्ट्रैप v4 में

Question

बूटस्ट्रैप v3 में मैं अक्सर छिपी का उपयोग करता हूं - ** अलग-अलग स्क्रीन चौड़ाई पर मल्टी कॉलम लेआउट को नियंत्रित करने के लिए क्लीयरफिक्स के साथ संयुक्त कक्षाएं। उदाहरण के लिए,

मैं अपने मल्टी कॉलम को अलग-अलग स्क्रीन चौड़ाई पर सही ढंग से प्रदर्शित करने के लिए कई छिपे हुए - ** एक डीआईवी में मिला सकता हूं।

एक उदाहरण के रूप में अगर मैं उत्पाद तस्वीरों की पंक्तियों को प्रदर्शित करना चाहता था, तो बड़ी स्क्रीन पर प्रति पंक्ति 4, छोटी स्क्रीन पर 3, फिर बहुत छोटी स्क्रीन पर 2। उत्पाद की तस्वीरें अलग-अलग ऊंचाइयां हो सकती हैं इसलिए मुझे पंक्ति को ठीक से सुनिश्चित करने के लिए क्लीयरफिक्स की आवश्यकता है।

यहाँ v3 में एक उदाहरण है ...

http://jsbin.com/tosebayode/edit?html,css,output

अब उस v4 ने इन कक्षाओं को खत्म कर दिया है, और उन्हें दृश्यमान / छिपी - ** - अप / डाउन कक्षाओं के साथ बदल दिया है जो मुझे लगता है कि इसके बजाय एकाधिक DIV के साथ एक ही काम करना है।

यहाँ v4 में एक समान उदाहरण है ...

http://jsbin.com/sagowihowa/edit?html,css,output

इसलिए मैं एक ही DIV से गया हूँ एक ही चीज़ को प्राप्त करने के लिए कई अप / डाउन कक्षाओं के साथ कई DIV को जोड़ने के लिए।

से ...

<div class="clearfix visible-xs-block visible-sm-block"></div>

सेवा...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

क्या v4 में ऐसा करने का एक बेहतर तरीका है जिसे मैंने अनदेखा कर दिया है?

Answer 1

बूटस्ट्रैप 4 के लिए अपडेट (2018)

hidden-*और visible-*कक्षाएं अब मौजूद नहीं हैं बूटस्ट्रैप 4 में आप बूटस्ट्रैप 4 में विशिष्ट स्तरों या breakpoints पर एक तत्व छुपाने के लिए, उपयोग करना चाहते हैं d-* प्रदर्शन कक्षाओं के हिसाब से।

याद रखें कि अतिरिक्त-छोटा / मोबाइल (पूर्व में xs) डिफ़ॉल्ट (अंतर्निहित) ब्रेकपॉइंट है, जब तक कि बड़े ब्रेकपॉइंट द्वारा ओवरराइड नहीं किया जाता है । इसलिए, इन्फ़िक्स नहीं रह गया है बूटस्ट्रैप 4 में मौजूद है ।-xs

ब्रेकपॉइंट और नीचे के लिए दिखाएँ / छिपाएँ :

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down(n / a 3.x) = d-none(समान hidden)

ब्रेकपॉइंट और ऊपर के लिए दिखाएँ / छिपाएँ :

• hidden-xs-up= d-none(समान hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n / a 3.x) = d-xl-none

केवल एक ब्रेकपॉइंट के लिए दिखाएँ / छिपाएँ :

• hidden-xs(केवल) = d-none d-sm-block(समान hidden-xs-down)
• hidden-sm (केवल) = d-block d-sm-none d-md-block
• hidden-md (केवल) = d-block d-md-none d-lg-block
• hidden-lg (केवल) = d-block d-lg-none d-xl-block
• hidden-xl (n / a 3.x) = d-block d-xl-none
• visible-xs (केवल) = d-block d-sm-none
• visible-sm (केवल) = d-none d-sm-block d-md-none
• visible-md (केवल) = d-none d-md-block d-lg-none
• visible-lg (केवल) = d-none d-lg-block d-xl-none
• visible-xl (n / a 3.x) = d-none d-xl-block

बूटस्ट्रैप 4 में उत्तरदायी प्रदर्शन कक्षाओं का डेमो

इसके अलावा, कृपया ध्यान दें कि d-*-blockसाथ बदला जा सकता d-*-inline, d-*-flex, d-*-table-cell, d-*-tableतत्व का प्रदर्शन प्रकार पर निर्भर करता है आदि ..। प्रदर्शन कक्षाओं पर अधिक पढ़ें

Comments

जब बीटा जारी किया गया था, तो मैंने इस बदलाव को देखा था और मुझे लगता है कि अल्फा रिलीज में यह कैसे बेहतर था। उत्तर जोड़ने के लिए धन्यवाद - मैं समाधान के रूप में चिह्नित करूंगा।

— जोहाना

@ जोहाना यह बदतर है - हालांकि। ऐसा नहीं है d-initialकि आप अब d-<breakpoint>-hiddenइसे ओवरराइड नहीं कर सकते हैं और इसे इसके प्रारंभिक मूल्य पर सेट कर सकते हैं । अगर मैं छोटे स्क्रीनों पर एक तत्व को छिपाना चाहता हूं, फिर भी इसे प्रारंभिक प्रदर्शन (जो गतिशील हो सकता है) को जाने बिना मध्यम और बड़े लोगों पर दिखाता है तो मैं इसके मूल्य को पुनर्स्थापित नहीं कर सकता। उन्होंने इसमें से किसी के बारे में नहीं सोचा।

— येट्स

सबसे खराब अद्यतन कभी। एक सुपर-सहज ज्ञान युक्त "बोलने" की अवधारणा से किसी चीज़ को कैसे जाना जाता है? इसके लिए एक मुद्दे को खोलना। वे कम से कम पुराने वर्गों को सह-अस्तित्व दे सकते थे।

— एंड्रियास

मैं वास्तव में आश्चर्यचकित हूं कि इस उत्तर को खोजना कितना कठिन था।

— एंथनी

@ और मैं पूरी तरह से सहमत हूं, यह मेरी राय में खराब डिजाइन है

— एंथनी

Answer 2

दुर्भाग्य से सभी कक्षाएं hidden-*-upऔर hidden-*-downबूटस्ट्रैप (बूटस्ट्रैप संस्करण 4 बीटा के रूप में , संस्करण 4 अल्फा और संस्करण 3 में ये कक्षाएं अभी भी मौजूद हैं) से हटा दिए गए थे ।

इसके बजाय, नई कक्षाओं d-*का उपयोग किया जाना चाहिए, जैसा कि यहां बताया गया है: https://getbootstrap.com/docs/4.0/migration/#utilities

मुझे पता चला कि नया दृष्टिकोण कुछ परिस्थितियों में कम उपयोगी है। पुराना दृष्टिकोण HIDE तत्वों का था जबकि नया दृष्टिकोण SHOW तत्वों का है। तत्वों को दिखाना सीएसएस के साथ इतना आसान नहीं है क्योंकि आपको यह जानना होगा कि तत्व को ब्लॉक, इनलाइन, इनलाइन-ब्लॉक, टेबल आदि के रूप में प्रदर्शित किया गया है।

आप इस CSS के साथ बूटस्ट्रैप 3 से ज्ञात पूर्व "छिपी हुई * *" शैलियों को पुनर्स्थापित करना चाहते हैं:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

hidden-unless-*बूटस्ट्रैप 3 में कक्षाएं शामिल नहीं थीं, लेकिन वे उपयोगी भी हैं और आत्म-व्याख्यात्मक होनी चाहिए।

Comments

क्या यह अभी भी B4 के वर्तमान संस्करण के साथ काम करता है? इस दृश्यता में गड़बड़ी मुख्य कारणों में से एक है जिसे मैंने बढ़ने से परेशान नहीं किया है। मैं कभी-कभी प्रोग्रामिंग करते समय बहुत परेशान हो जाता हूं और यह सिर्फ मेरे सिर में कर रहा था। (मैं 64 हूं इसलिए मुझे एक ब्रेक दें!) इसके अलावा (चुटीले होने का मतलब नहीं है) लेकिन क्या आपके पास दृश्यमान के बराबर है? V उपयोगी दोनों IMHO (या वैसे भी मैं कोड :-)) ATB स्टीव

— BeNice

Answer 3

बूटस्ट्रैप v4.1 अपने ग्रिड सिस्टम पर कॉलम छिपाने के लिए नए क्लासनाम का उपयोग करता है।

स्क्रीन की चौड़ाई के आधार पर कॉलम छिपाने के लिए, d-noneक्लास या किसी भी क्लास का उपयोग करें d-{sm,md,lg,xl}-none। कुछ स्क्रीन आकार पर कॉलम प्रदर्शित करने के साथ ऊपर उल्लेख किया कक्षाओं गठबंधन d-blockया d-{sm,md,lg,xl}-blockवर्गों।

उदाहरण हैं:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

इनमें से अधिक यहाँ ।

Answer 4

मुझे उम्मीद नहीं है कि मल्टीपल डिवाज एक अच्छा उपाय है।

मैं भी लगता है कि आप की जगह ले सकता .visible-sm-blockके साथ .hidden-xs-downऔर .hidden-md-up(या .hidden-sm-downऔर .hidden-lg-upएक ही मीडिया के प्रश्नों पर कार्रवाई करने के लिए)।

hidden-sm-up में संकलित:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downऔर में .hidden-lg-upसंकलित:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

दोनों ही स्थिति एक जैसी होनी चाहिए।

जब आप बदलने की कोशिश करते हैं .visible-sm-blockऔर आप स्थिति अलग हो जाते हैं .visible-lg-block। बूटस्ट्रैप v4 डॉक्स आपको बताते हैं:

ये वर्ग कम सामान्य मामलों को समायोजित करने का प्रयास नहीं करते हैं जहां एक तत्व की दृश्यता को व्यूपोर्ट ब्रेकपॉइंट आकारों की एक एकल सन्निहित सीमा के रूप में व्यक्त नहीं किया जा सकता है; इसके बजाय आपको ऐसे मामलों में कस्टम CSS का उपयोग करने की आवश्यकता होगी।

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

Answer 5

उपयोगकर्ता Klaro ने पुराने दृश्यता वर्गों को पुनर्स्थापित करने का सुझाव दिया, जो एक अच्छा विचार है। दुर्भाग्य से, उनके समाधान ने मेरी परियोजना में काम नहीं किया।

मुझे लगता है कि बूटस्ट्रैप के पुराने मिश्रण को बहाल करना बेहतर विचार है, क्योंकि यह सभी ब्रेकप्वाइंट को कवर कर रहा है जिसे उपयोगकर्ता द्वारा व्यक्तिगत रूप से परिभाषित किया जा सकता है।

यहाँ कोड है:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

मेरे मामले में, मैंने इस हिस्से को एक _custom.scssफ़ाइल में डाला है जो इस बिंदु पर शामिल है bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

Comments

बहुत मददगार! बूटस्ट्रैप 4 रास्ता थोड़ा सा पहेली लगता है, साथ ही यह जोड़ रहा है कि display: blockकुछ परिदृश्यों में प्रवाह टूट जाता है।

— ल्यूक

Answer 6

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

अब आपको उस आकार को परिभाषित करना होगा जो छिपाया जा रहा है

.hidden-xs-down

Xs और छोटे से कुछ भी छिपाएगा, केवल xs

.hidden-xs-up

सब छिपा लेगा

Comments

हां, मैंने अपने v4 उदाहरण में इनका उपयोग किया है, लेकिन मुद्दा यह है कि मुझे अब कई DIV की आवश्यकता है जहां v3 में मैं एक के साथ कर सकता हूं ...

— johna

यह समाधान पुराना है और केवल बूटस्ट्रैप V4 अल्फा के लिए, बीटा के लिए और उसके बाद वैध है, दुर्भाग्य से इन परिवर्तनों को ऊपर दिए गए महासागरों में निर्दिष्ट करने की आवश्यकता है

— मार्क

Answer 7

बूटस्ट्रैप 4 के लिए, तत्वों को दिखाने / छिपाने के लिए उपयोग की जाने वाली कक्षाओं की व्याख्या करने वाली एक मैट्रिक्स छवि स्क्रीन आकार पर निर्भर करती है:

स्रोत: मेडुइम: बूटस्ट्रैप 4 हिडन एंड विजिबल

Comments

यह चार्ट बहुत मददगार है

— Csaba Toth

यहाँ कोडपद पर मध्यम लेख से एक लाइव लिंक है: codeply.com/embed/…

— Csaba Toth

Answer 8

पूरी सामग्री को छिपाने के लिए बूटस्ट्रैप 4 इस वर्ग '.d-none' का उपयोग करता है, यह पिछले बूटस्ट्रैप संस्करण '.hidden' की तरह ब्रेकप्वाइंट की परवाह किए बिना सब कुछ छिपा देगा।

Answer 9

दुर्भाग्यवश ये नए बूटस्ट्रैप 4 वर्ग पुराने डीवाज़ की तरह काम नहीं करते हैं, जैसे कि collapseवे दिखाई देने वाले डिव को सेट करते हैं, blockजो कि छिपे हुए के बजाय दिखाई देना शुरू कर देता है और यदि आप collapseकार्यक्षमता के चारों ओर एक अतिरिक्त div जोड़ते हैं तो वह काम नहीं करता है।

Answer 10

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>