ट्विटर बूटस्ट्रैप 3 में कोल-एलजी-पुश और कोल-एलजी-पुल का उपयोग करके कॉलम ऑर्डर हेरफेर

Question

अब मैं ट्विटर बूटस्ट्रैप 3 पर प्रलेखन पढ़ रहा हूं, और इस पृष्ठ में दिखाए गए अनुसार कॉलम ऑर्डरिंग का पालन करने की कोशिश की, लेकिन दीवार को मारा। मुझे समझ नहीं आ रहा है कि ऐसा कोड क्यों काम करता है और न ही सेटिंग को सही ढंग से कैसे निर्दिष्ट करता है। मैं जो दिखाना चाहता हूं वह एक ग्रिड है, जिसमें लंबाई 5, और दूसरी लंबाई 5 और अंत में एक लंबाई 2 ग्रिड शामिल है।

तो मेरा कुछ इस तरह है:

[5] [5] [2]

और मैं क्या हासिल करना चाहता हूं, जब इसे डेस्कटॉप पर देखा जाता है, तो ऊपर दिया गया लेआउट प्रदर्शित होता है, लेकिन जब इसे मोबाइल पर देखा जाता है, तो मैं दूसरी लंबाई 5 ऑब्जेक्ट पहले दिखाना चाहता हूं, फिर पहली लंबाई 5 ऑब्जेक्ट, और अंत में लंबाई 2 ऑब्जेक्ट। , खड़ी है। ऐशे ही:

[5] (second)
[5] (first)
[2]  

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

[5] (first)
[5] (second)
[2] 

तो मैं सही ढंग से दूसरे को पहले से कैसे रख सकता हूं? या जब से मैं उसी लंबाई की वस्तु का उपयोग करता हूं, क्या कॉलम ऑर्डर करने से काम नहीं कर सकता है?

यहाँ आपकी जानकारी के लिए मेरा कोड है:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

इसके अलावा, प्रलेखन स्पष्ट pullया क्या pushमतलब नहीं है। तो क्या मुझे कुछ याद आ रहा है?

धन्यवाद।

Comments

try class = "col-lg-5 col-sm-5 col-sm-push-5" और उसी के साथ 2 के लिए पुल

— दाऊद Awan

एक आसान और स्पष्ट उदाहरण (यह 2 कॉलम लेआउट के लिए है, लेकिन आप इस बिंदु को तुरंत प्राप्त करेंगे और आवश्यकतानुसार अतिरिक्त कोलों को जोड़ने में सक्षम होंगे) पृष्ठ के निचले भाग में यहां पाया जा सकता है, जिसका शीर्षक "पुश एंड पुल - चेंज कॉलम ऑर्डर दे रहा है" है। ": w3schools.com/bootstrap/bootstrap_grid_examples.asp

— टायलर रैफर्टी

Answer 1

यह उत्तर तीन भागों में है, आधिकारिक विज्ञप्ति के लिए नीचे देखें (v3 और v4)

मैं RC1 i डाउनलोड के लिए मूल फ़ाइलों में कोल्ड-एलजी-पुश-एक्स या पुल क्लासेस भी नहीं खोज सका, इसलिए अपनी बूटस्ट्रैप.css फ़ाइल की जाँच करें। उम्मीद है कि यह कुछ ऐसा है जो वे RC2 में सुलझा लेंगे।

वैसे भी, कॉल-पुश- * और पुल क्लासेस मौजूद थे और यह आपकी आवश्यकताओं के अनुरूप होगा। यहाँ एक डेमो है

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

संपादित करें: आधिकारिक नियम v3.0 के लिए जवाब है

इस ब्लॉग पोस्ट को इस विषय पर भी देखें

• col-vp-push-x= स्तंभ को x संख्या स्तंभों के दाईं ओर धकेलें , जहां से स्तंभ सामान्य रूप से प्रस्तुत करेगा -> position: relative, vp या बड़े दृश्य-पोर्ट पर।

• col-vp-pull-x= स्तंभ को x संख्या स्तंभों के बाईं ओर खींचें , जहां से स्तंभ सामान्य रूप से प्रस्तुत करेगा -> position: relative, vp या बड़े दृश्य-पोर्ट पर।

  vp = xs, sm, md, या lg

  x = 1 के माध्यम से 12

मुझे लगता है कि अधिकांश लोगों को क्या गड़बड़ है, यह है कि आपको अपने HTML मार्कअप में कॉलम के क्रम को बदलने की आवश्यकता है (नीचे दिए गए उदाहरण में, बी ए से पहले आता है) , और यह केवल दृश्य-बंदरगाहों पर धकेलने या खींचने का काम करता है जो निर्दिष्ट किया गया था, उससे अधिक या उसके बराबर। यानी col-sm-push-5केवल smदृश्य-बंदरगाहों या अधिक से अधिक 5 स्तंभों को धक्का देगा । ऐसा इसलिए है क्योंकि बूटस्ट्रैप एक "मोबाइल पहला" ढांचा है, इसलिए आपके HTML को आपकी साइट के मोबाइल संस्करण को प्रतिबिंबित करना चाहिए। फिर पुशिंग और पुलिंग बड़े स्क्रीन पर की जाती है।

• (डेस्कटॉप) बड़े व्यू-पोर्ट्स को धक्का दिया जाता है और खींचा जाता है।
• (मोबाइल) छोटे दृश्य-पोर्ट सामान्य क्रम में प्रस्तुत करते हैं।

डेमो

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

दृश्य-बंदरगाह> = एस.एम.

|A|B|C|

व्यू-पोर्ट <sm

|B|
|A|
|C|

संपादित करें: V4.0 के लिए जवाब है

V4 के साथ फ्लेक्सबॉक्स और ग्रिड सिस्टम में अन्य बदलाव आते हैं और फ्लेक्सबॉक्स ऑर्डरिंग का उपयोग करने के पक्ष में पुश \ पुल कक्षाएं हटा दी गई हैं।

• उपयोग .order-*दृश्य क्रम को नियंत्रित करने के लिए कक्षाओं का (जहां * = 1 थ्रू 12)
• यह ग्रिड टीयर विशिष्ट भी हो सकता है .order-md-*
• इसके अलावा .order-first(-1) और .order-last(13) उपलब्ध हैं

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Comments

धन्यवाद। मेरी आयात योग्य लिपियों को उन लोगों में बदल दिया, जिन्हें मैंने गितुब भंडार से क्लोन किया था, फिर यह उम्मीद के मुताबिक काम किया। col-lg-pushजैसा कि आपने कहा, प्रारंभिक लिपियों में शामिल नहीं था । बहुत बहुत धन्यवाद।

— Blaszard

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

— एलरियन

मुझे लगता है कि दूसरा विकल्प, "<= sm", सिर्फ "<" होना चाहिए, क्योंकि वे दोनों "=" नहीं कर सकते हैं

— शॉन टेलर

कॉलम के क्रम को फ्लिप करें (मोबाइल पहले), यही चाल है! धन्यवाद!

— १०'१४ को

बूटस्ट्रैप v4 में अब उनका नाम {पुश / पुल} - {vp} - {1-12}, जैसे पुश- md-4

— pasql

Answer 2

पुल को ब्राउज़र के बाईं ओर "खींच" और पुश ब्राउज़र के बाईं ओर से "पुश" करता है।

पसंद:

तो मूल रूप से किसी भी वेब पेज के 3 कॉलम लेआउट में "मेन बॉडी" "सेंटर" में दिखाई देता है और "मोबाइल" में "मेन बॉडी" पेज के "टॉप" में दिखाई देता है। यह ज्यादातर 3 कॉलम लेआउट वाले सभी द्वारा वांछित है।

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

आप इसे यहां देख सकते हैं: http://jsfiddle.net/DrGeneral/BxaNN/1/

आशा करता हूँ की ये काम करेगा

Comments

पुश और पुल "मार्जिन निर्दिष्ट न करें"। वे कॉलम ऑर्डरिंग बदलते हैं। आपके उदाहरण में, सामग्री कॉलम सामान्य रूप से बड़े आकार में 1-4 स्तंभों पर कब्जा कर लेगा, और साइडबार कॉलम 5-8 स्तंभों पर कब्जा कर लेगा। यह मार्कअप में उनके आदेश पर आधारित है। आप उन्हें मार्कअप में बदलकर उनके आदेश को बदल सकते हैं, लेकिन यदि किसी भी कारण से आप नहीं चाहते हैं (उदाहरण के लिए मुख्य सामग्री के साथ कोड को और अधिक अर्थपूर्ण बनाना) तो आप पुश और पुल कक्षाओं के साथ उनके आदेश को बदल सकते हैं।

— टी न्गुयेन

(cont'd।) आपके उदाहरण में, कॉलम को 'पुश ’करके कॉलम के 1-4 से 5-8 तक col-lg-push-4के कंटेंट कॉलम में बदलाव करना । इसी तरह, साइडबार कॉलम को 5-8 से 1-4 तक col-lg-pull-4खींचता है ।

— टी नग्येन

col - $$ -

— ऑफसेट-

Answer 3

ग़लतफ़हमी स्तंभ आदेश के साथ आम गलत धारणा है कि, मैं (या कर सकते थे) को आगे बढ़ाने और मोबाइल उपकरणों पर खींच, और कहा कि डेस्कटॉप विचारों मार्कअप के प्राकृतिक क्रम में प्रस्तुत करना चाहिए करते हैं। ये गलत है।

रियलिटी बूटस्ट्रैप एक मोबाइल पहला ढांचा है। इसका अर्थ है कि आपके HTML मार्कअप में कॉलम का क्रम उस क्रम का प्रतिनिधित्व करना चाहिए जिसमें आप उन्हें मोबाइल उपकरणों पर प्रदर्शित करना चाहते हैं। इसका मतलब है कि बड़े डेस्कटॉप दृश्यों पर पुश और पुलिंग किया जाता है। मोबाइल उपकरणों पर नहीं देखें ..

ब्रैंडन शल्मज़ - फुल स्टैक वेब डेवलपर यहाँ पूर्ण विवरण पर एक नज़र है

Answer 4

मुझे ऐसा लगा जैसे मैं अपना $ 0.2 उन 2 अच्छे उत्तरों में जोड़ दूंगा। मेरे पास एक मामला था जब मुझे अंतिम कॉलम को 3-कॉलम स्थिति में शीर्ष पर ले जाना था।

[एक] [बी] [सी]

सेवा

[सी]

[ए]

[बी]

बूस्ट्रैप का वर्ग .col-xx-push-Xऔर कुछ नहीं करता है लेकिन एक स्तंभ को दाईं ओर धकेलता हैleft: XX%; इसलिए आपको एक स्तंभ दाईं ओर धकेलने के लिए छद्म स्तंभों की संख्या को जोड़ना होगा।

इस मामले में:

• दो कॉलम (col-md-5 और col-md-3) बाएं जा रहे हैं, प्रत्येक जो सही जा रहा है के मूल्य के साथ;

• एक ( col-md-4) बाएं जा रहे पहले दो (5 + 3 = 8) के योग से सही हो रहा है;

---

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Answer 5

यदि आपको व्यूपोर्ट आकार के आधार पर 1/2/4 के कॉलम में डेटा व्यवस्थित करने की आवश्यकता है तो धक्का और खींचना कोई विकल्प नहीं हो सकता है। कोई फर्क नहीं पड़ता कि आप पहली बार में अपने आइटम कैसे ऑर्डर करते हैं, आकारों में से एक आपको गलत आदेश दे सकता है।

इस मामले में एक समाधान बिना किसी धक्का या पुल वर्गों के नेस्टेड पंक्तियों और कॉल का उपयोग करना है।

उदाहरण

XS में आप चाहते हैं ...

A
B
C
D
E
F
G
H

एसएम में आप चाहते हैं ...

A   E
B   F
C   G
D   H

एमडी और इसके बाद के संस्करण में आप चाहते हैं ...

A   C   E   G
B   D   F   H

उपाय

नेस्टेड टू-कॉलम चाइल्ड एलिमेंट्स का उपयोग आसपास के दो-कॉलम मूल तत्व में करें:

यहाँ एक काम का टुकड़ा है:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

इस समाधान की एक और सुंदरता यह है, कि आइटम अपने प्राकृतिक क्रम (ए, बी, सी, ... एच) में कोड में दिखाई देते हैं और उन्हें फेरबदल नहीं करना पड़ता है, जो सीएमएस पीढ़ी के लिए अच्छा है।