क्या बूटस्ट्रैप में pad-10
, mar-left-10
जैसे पैडिंग और मार्जिन कक्षाएं हैं या मुझे अपनी खुद की कस्टम कक्षाएं जोड़नी हैं? उदाहरण के लिए, पैडिंग और मार्जिन टैब पर here के समान।क्या बूटस्ट्रैप ने पैडिंग और मार्जिन कक्षाएं बनाई हैं?
उत्तर
.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }
.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }
.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }
.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }
.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }
.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }
.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }
.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }
.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }
.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }
.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }
.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }
.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }
.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }
मुझे लगता है कि आप किस बारे में पूछ रहे हैं कि rows
या col-xx-xx
कक्षाओं के बीच उत्तरदायी अंतर कैसे बनाएं।
आप निश्चित रूप से col-xx-offset-xx
वर्ग के साथ ऐसा कर सकते हैं:
<div class="col-xs-4">
</div>
<div class="col-xs-7 col-xs-offset-1">
</div>
सीधे तत्वों को margin
या padding
जोड़ने के लिए के रूप में, यह आपके तत्व के आधार पर करने के लिए कुछ सरल तरीके हैं। आप btn-lg
या label-lg
या well-lg
का उपयोग कर सकते हैं। यदि आप कभी सोच रहे हैं, तो मैं यह छोटा सा पैडिंग कैसे दे सकता हूं। जोड़ने का प्रयास करें प्राथमिक class name
+ lg
या sm
या md
अपने आकार जरूरतों के आधार पर:
<button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button>
बूटस्ट्रैप 4 मार्जिन और गद्दी कक्षाओं के लिए एक नया अंकन है। Bootstrap 4.0 Documentation - Spacing का संदर्भ लें।
प्रलेखन से:
संकेतन
रिक्ति उपयोगिताओं कि, सभी breakpoints पर लागू होते हैं
xs
सेxl
को, उन में कोई ब्रेकप्वाइंट संक्षिप्त नाम है। ऐसा इसलिए है क्योंकि उन वर्गmin-width: 0
और ऊपर से लागू होते हैं, और इस प्रकार मीडिया क्वेरी द्वारा बाध्य नहीं हैं। शेष ब्रेकपॉइंट्स में, ब्रेकपॉइंट संक्षिप्त नाम शामिल है।कक्षाएं
xs
और{property}{sides}-{breakpoint}-{size}
sm
के लिए,md
,lg
, औरxl
के लिए प्रारूप{property}{sides}-{size}
का उपयोग कर नाम हैं।उदाहरण
.mt-0 { margin-top: 0 !important; }
.p-3 { padding: $spacer !important; }
- 1. क्या सामग्री नियंत्रण द्वारा लागू मार्जिन और पैडिंग हैं?
- 2. डिव और छवि मार्जिन/पैडिंग
- 3. मोंगोडीबी ने फाइलें बनाई हैं
- 4. क्या हम सीएसएस में न्यूनतम मार्जिन और अधिकतम-मार्जिन, अधिकतम-पैडिंग और मिनी-पैडिंग परिभाषित कर सकते हैं?
- 5. div पैडिंग, मार्जिन?
- 6. पैडिंग क्या हैं स्टार्ट और पैडिंग अंत?
- 7. पैडिंग बूटस्ट्रैप
- 8. मार्जिन और पैडिंग के साथ एंड्रॉइड वेट
- 9. बूटस्ट्रैप पतन और पैडिंग समस्या
- 10. क्या यूएल में डिफ़ॉल्ट मार्जिन या पैडिंग
- 11. एक एनएसटीएक्स्टव्यूइंग कुछ पैडिंग/मार्जिन
- 12. बूटस्ट्रैप 3 कॉलम लंबवत मार्जिन
- 13. wpf ListView GridView पर मार्जिन/पैडिंग सेट कहां हैं?
- 14. <Body> का मार्जिन और पैडिंग टैग
- 15. चिनाई/आइसोटोप के साथ बाहरी पैडिंग और मार्जिन
- 16. उपयोगकर्ताओं द्वारा बनाई गई नई कक्षाएं?
- 17. मोबाइल सफारी सफेद पैडिंग/मार्जिन दाएं
- 18. एंड्रॉइड: लेआउट फ़ाइलें मार्जिन/पैडिंग शॉर्टकट्स
- 19. रीसाइक्लर में पिछले बच्चे में मार्जिन/पैडिंग
- 20. तालिका दृश्य के सेल पैडिंग या मार्जिन
- 21. सीएसएस - मार्जिन और पैडिंग के लिए इस्तेमाल किया जाना चाहिए
- 22. सीएसएस संक्रमण के साथ मार्जिन और पैडिंग एनिमेटिंग अजीब एनीमेशन
- 23. किस फाइल ने 'इंस्टॉल करें' प्रतिलिपि बनाई, और कहां?
- 24. अंतिम आंतरिक कक्षाएं क्या हैं?
- 25. पैडिंग
- 26. मार्जिन और पैडिंग शून्य होने पर इन पी तत्वों के बीच की जगह क्यों हैं?
- 27. मार्जिन क्या करें: 5 पीएक्स 0; और मार्जिन: 5 पीएक्स 0 0; क्या मतलब है?
- 28. क्या पैडिंग एंड और पैडिंग का उपयोग करने का तरीका है minSdkVersion <17?
- 29. क्या आपके कोड-प्रथम कक्षाएं आपके डोमेन कक्षाएं हैं?
- 30. बूटस्ट्रैप: मार्जिन-दाएं के लिए कक्षा?