अनुपलब्ध - ** और छुपा - ** बूटस्ट्रैप v4

Question

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

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

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

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

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

अब जब कि v4 इन वर्गों के साथ दूर किया गया है, और उन्हें दृश्य/छुपा के साथ बदल दिया - ** - ऊपर/नीचे वर्गों मैं करने लगते हैं इसके बजाय एक ही चीज़ को कई डीआईवी के साथ करना है।

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

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

तो मैं ऊपर/नीचे कक्षाएं एक ही बात को प्राप्त करने के बहुत सारे के साथ कई DIVs जोड़ने के लिए होने के लिए एकल DIVs से चले गए हैं।

से ...

<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

अद्यतन (2018)

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

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = 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 = 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 (केवल) = 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 (केवल) = d-none d-xl-block

Demo of this responsive display classes in Bootstrap 4

इसके अलावा, ध्यान दें कि d-*-blockd-*-inline साथ बदला जा सकता, d-*-flex, d-*-table-cell, d-*-table आदि .. निर्भरता तत्व के प्रदर्शन प्रकार पर डिंग। display classes

Answer 2

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

अब आप तो

रूप

.hidden-xs-down 

XS और छोटे से anythinging छिपाने होगा, केवल xs

.hidden-xs-up 

सब कुछ छिपाने करेंगे क्या छुपाई जा रही है के आकार को परिभाषित करने के लिए है

Answer 3

मुझे उम्मीद नहीं है कि एकाधिक div I एक अच्छा समाधान है।

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

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 डॉक्स आपको बता:

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

.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 4

दुर्भाग्य से सभी वर्गों hidden-*-up और hidden-*-down (, बीटा बूटस्ट्रैप संस्करण की 4 के रूप में संस्करण 4 अल्फा और संस्करण में इन कक्षाओं में अभी भी अस्तित्व में) बूटस्ट्रैप से हटा दिया गया।

इसके बजाय, नए वर्गों d-*, इस्तेमाल किया जाना चाहिए यहाँ उल्लेख किया: https://getbootstrap.com/docs/4.0/migration/#utilities

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

आप बूटस्पर से ज्ञात पूर्व "छिपी हुई * शैलियों को पुनर्स्थापित करना चाहेंगे इस सीएसएस के साथ 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 में शामिल नहीं थे, लेकिन वे के रूप में अच्छी उपयोगी होते हैं और आत्म व्याख्यात्मक होना चाहिए। बूटस्ट्रैप 4 के लिए

Answer 5

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

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

यहाँ कोड है:

/*! 
* 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"; 
[..] 

Answer 6

दुर्भाग्य से इन नए बूटस्ट्रैप:

// 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 में इस बिंदु पर शामिल किया गया है डाला है 0 कक्षाएं collapse का उपयोग कर पुराने लोगों की तरह काम नहीं करती हैं क्योंकि वे दृश्य div को block पर सेट करते हैं जो छुपाए जाने के बजाय दृश्यमान शुरू होता है और यदि आपके आस-पास एक अतिरिक्त div जोड़ते हैं 0 कार्यक्षमता अब काम नहीं करती है।