मैं बूटस्ट्रैप 3 ग्रिड सिस्टम का उपयोग कर रहा हूं जो इसे अब तक प्यार करता था और सब कुछ अच्छी तरह से काम कर रहा था, मैं col-xs-ऑफसेट -1 का उपयोग करने की कोशिश कर रहा हूं और यद्यपि -col-sm-ऑफसेट -1 काम नहीं करता है। मुझे यहां क्या समझ नहीं आ रहा है ?
<div class="col-xs-2 col-xs-offset-1">col</div>
col-xs-*कक्षाओं के संबंध में एक v4 प्रश्न है ।
जवाबों:
संपादित करें: जैसा कि बूटस्ट्रैप 3.1 .col-xs-offset-* मौजूद है , बूटस्ट्रैप :: ग्रिड विकल्प देखें
.col-xs-offset-*मौजूद नहीं है। ऑफसेट और कॉलम ऑर्डरिंग केवल छोटे और अधिक के लिए हैं। (केवल .col-sm-offset-*, .col-md-offset-*और .col-lg-offset-*)
आधिकारिक दस्तावेज देखें: बूटस्ट्रैप :: ग्रिड विकल्प
.col-xs-offset-*बूटस्ट्रैप 3 में मौजूद है
वैकल्पिक रूप से, आप xs- ऑफसेट के लिए एक खाली div जोड़ सकते हैं (एक से अधिक स्थानों पर सामग्री का प्रबंधन करने के लिए आपको बचाएंगे)
<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>
बूटस्ट्रैप देवता उन xs को जोड़ने से इंकार करते दिखते हैं- धक्का देकर और कक्षाओं को खींचने के लिए, यहां देखें: https://github.com/twbs/bootstrap/issues/9689
एक सुझाव जब आप एक ऑफसेट करना चाहते हैं, लेकिन अपने आप को अतिरिक्त छोटी चौड़ाई में असमर्थ पाते हैं:
का उपयोग करें .hidden-xsऔर.visible-xs अतिरिक्त छोटे चौड़ाई के लिए अपने html ब्लॉक का एक संस्करण है, और सब कुछ के लिए एक बनाने के लिए (आप अभी भी उपयोग कर सकते हैं जहां एक ऑफसेट)
उदाहरण:
<div class="hero container">
<div class="row">
<div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
<h2>This is a banner at the top of my site. It shows in everything except XS</h2>
<p>Here are some supporting details about my banner.</p>
</div>
<div class="visible-xs col-xs-12">
<h2 class="pull-right">This is my banner at XS width.</h2>
<p class="pull-right">This is my supporting content at XS width.</p>
</div>
</div>
</div>
यह वास्तव में निराशाजनक था इसलिए मैंने लिखा था कि आप उस सक्षम को हड़प सकते हैं col-offset-xs-*। मैंने यह भी देखा कि बूटस्ट्रैप SASS रेपो बोवर को इस सप्ताह स्थापित किया गया था, col-offset-sm-0ताकि इसमें बहुत शर्म न हो लेकिन यह कई मामलों में बेमानी होगा।
/*
Include this after bootstrap.css
Add a class of 'col-xs-offset-*' and
if you want to disable the offset at a larger size add in 'col-*-offset-0'
Examples:
All display sizes (xs,sm,md,lg) have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-3">
xs has an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">
xs and sm have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">
xs, sm and md will have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">
*/
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
margin-left: 0;
}
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
col-xs-offset-*मीडिया क्वेरी से बाहर उल्लेख किए जाने के कारण यह काम नहीं कर रहा है। आप इसका इस्तेमाल करना चाहते हैं, आप सभी उल्लेख करना होगा ऑफसेट (जैसे: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")
लेकिन यह सही नहीं है, उन्हें col-xs-offset-*मीडिया क्वेरी में उल्लेख करना चाहिए
Boostrap 4.x के रूप में, जैसे कि col-xs-6 अब केवल col-6 है
ऑफसेट-एक्स -6 अब केवल ऑफसेट -6 है ।
पहले से ही यह कोशिश की, निश्चित रूप से काम करता है।
कोल्ड-एमडी-ऑफसेट -4 के बजाय ऑफसेट-एमडी -4 का उपयोग करने के बजाय, जब आप ऑफसेट कर रहे हैं तो आपको कॉल का उपयोग नहीं करना होगा। आपके मामले में ऑफसेट-एक्स -1 का उपयोग करें और यह काम करेगा। सुनिश्चित करें कि आपने अपने HTML में bootstrap.css फ़ोल्डर को निम्न प्रकार से बुलाया है।
// यह बूटस्ट्रैप 4 में काम करता है, प्रलेखन में कुछ बदलाव थे। हमें उपसर्ग कॉलोनी की आवश्यकता नहीं है, बस ऑफसेट- lg-3 जैसे
<div class="row">
<div class="offset-lg-3 col-lg-6"> Some content...
</div>
</div>
// यहाँ doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
xsऑफसेट के बारे में पूछ रहा है , सामान्य रूप से ऑफसेट नहीं। डॉक्स के बारे में मुझे xs ऑफ़सेट के बारे में कुछ भी नहीं मिल सकता है, और न ही मुझे DOM में xs ऑफ़सेट क्लासेस जोड़कर ट्रिगर करने के लिए मिल सकता है। उम्मीद है कि मैं गलत हूं, लेकिन मैं इसका पता नहीं लगा सकता।
नवीनतम बूटस्ट्रैप के अनुसार v3.3.7 xs- ऑफसेटिंग की अनुमति है। यहां देखें दस्तावेज़ीकरण बूटस्ट्रैप ऑफ़सेटिंग । तो आप उपयोग कर सकते हैं
<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
शायद ज़रुरत पड़े कोई एक ही त्रुटि मैं, इस पेज, यह है कि पर ठोकर जोड़ने से पहले किया करता है CSSरीसेट नियम (जैसे एरिक मेयेर द्वारा बहुत लोकप्रिय रीसेट लाखों वेबसाइटों पर प्रयोग किया जाता) के बाद बूटस्ट्रैप शामिल करने के ।
इसके अलावा, शायद मुझे यह इंगित करना चाहिए कि बूटस्ट्रैप के साथ ऐसा रीसेट आवश्यक नहीं होगा क्योंकि बूटस्ट्रैप वास्तव में normalize.css को v3.0.2 रीसेट करता है।
-xsv4 में गिरा दिया जा रहा है, देखना यह ।