बूटस्ट्रैप 4 में .pull-left और .pull-right क्लासेस का क्या हुआ?

Question

नवीनतम संस्करण में पुल-लेफ्ट और पुल-राइट को .pull- {xs, sm, md, lg, xl} द्वारा प्रतिस्थापित किया गया है - {बाएं, दाएं, कोई नहीं}

इसका मतलब है कि एक साधारण लिखने के बजाय class="pull-right", मुझे अब लिखना होगाclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

क्या यह करने के लिए एक कम थकाऊ तरीका है?

Comments

ऐसा लगता है कि आपने मोबाइल को पहला तरीका नहीं समझा है। .pull-xs-rightऑब्जेक्ट को सभी स्क्रीन आकारों पर सही फ्लोट करने का कारण होगा, क्योंकि सीएसएस बड़े उपकरणों पर भी कास्केड करता है। Ps शायद यह हाल के संस्करणों में बदल गया है लेकिन आपको इसके .float-rightबजाय उपयोग करना चाहिए .pull-right।

— फिल हिले

Answer 1

2016 में वापस जब यह प्रश्न मूल रूप से पूछा गया था, तो उत्तर था:

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

लेकिन अब स्वीकृत उत्तर रॉबर्ट वेन्ट का होना चाहिए।

Comments

.float-{sm,md,lg,xl}-{left,right,none}अब छोड़ दिया झांकियां / सही / कोई भी जबकि .pull-leftऔर .pull-rightहटा दिया गया है।

— मिरको

पुल-राइट वापस आ गया है, लेकिन अगर ऐसा होता तो बस सीएसएस का इस्तेमाल करते.pull-right{@extend .pull-xs-right;}

— एलेक्सिस

इसका उत्तर 9/2016 था। सही उत्तर अब रॉबर्ट वेन्ट का है।

— फिलिप सन् 19

यह मोटे तौर पर लगता है कि आपको एक जवाब के लिए 21 डाउन वोट मिले जो कि अभी पदावनत है?

— लियोनार्डकैल्लीस

@PhillipSenn आपके जवाब को अपडेट करने पर विचार करता है ताकि आप टीम के खिलाड़ी होने के लिए अंक न खोएं।

— wizulus

Answer 2

कक्षाएं हैं float-right float-sm-right आदि ।

मीडिया के प्रश्न मोबाइल-प्रथम हैं, इसलिए उपयोग float-sm-rightकरने से छोटे स्क्रीन आकार और व्यापक कुछ भी प्रभावित होंगे, इसलिए प्रत्येक चौड़ाई के लिए एक वर्ग जोड़ने का कोई कारण नहीं है। बस सबसे छोटी स्क्रीन का उपयोग करें जिसे आप प्रभावित करना चाहते हैं याfloat-right सभी स्क्रीन चौड़ाई के लिए।

आधिकारिक दस्तावेज़:

कक्षाएं: https://getbootstrap.com/docs/4.4/utilities/float/

अपडेट करना: https://getbootstrap.com/docs/4.4/migration/#utilities

यदि आप बूटस्ट्रैप के पुराने संस्करण के आधार पर किसी मौजूदा प्रोजेक्ट को अपडेट कर रहे हैं, तो आप पुराने वर्ग के नामों के नियमों को लागू करने के लिए sass के विस्तार का उपयोग कर सकते हैं:

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

Comments

इसके बारे में प्रलेखन: getbootstrap.com/docs/4.0/migration/#utilities और getbootstrap.com/docs/4.0/utilities/float

— lasec0203

Answer 3

अपडेट 2018 (बूटस्ट्रैप 4.1 के अनुसार)

हाँ, pull-leftऔर pull-rightसाथ प्रतिस्थापित किया गया है float-leftऔर float-rightबूटस्ट्रैप 4 में।

हालाँकि, फ्लोट सभी मामलों में काम नहीं करेगा क्योंकि बूटस्ट्रैप 4 अब फ्लेक्सबॉक्स है ।

: ठीक है, उपयोग ऑटो मार्जिन (यानी करने के लिए संरेखित flexbox बच्चों को ml-autoया flexbox utils (यानी): justify-content-end,align-self-end , आदि ..)।

उदाहरण

एनएवी:

<ul class="nav">
   <li><a href class="nav-link">Link</a></li>
   <li><a href class="nav-link">Link</a></li>
   <li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>

ब्रेडक्रम्ब्स:

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">Right</a></li>
</ul>

https://www.codeply.com/go/6ITgrV7pvL

ग्रिड:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

Comments

एमएल-ऑटो वास्तव में वही है जो मुझे अपने

— नावबार में चाहिए

Answer 4

में बदला गया float-right float-left float-xx-leftऔरfloat-xx-right

Answer 5

यदि आप col-*कक्षाओं के साथ किसी अन्य काम में कॉलम के साथ उन का उपयोग करना चाहते हैं, तो आप order-*कक्षाओं का उपयोग कर सकते हैं ।

आप अपने कॉलम के ऑर्डर कक्षाओं के साथ नियंत्रित कर सकते हैं। बूटस्ट्रैप 4 प्रलेखन में अधिक देखें

बूटस्ट्रैप डॉक्स से एक सरल:

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Comments

यह काम किया। किसी कारण से pull-rightऔर pull-leftग्रिड स्तंभों पर काम नहीं करते4.1

— कुणाल

ये सही है। आदेश वह तरीका है जिससे आप पंक्तियों पर पुश / पुल बनाएंगे क्योंकि पंक्तियाँ अब फ्लेक्सबॉक्स का उपयोग करती हैं।

— Gcamara14

Answer 6

थाय दूर हो जाते हैं।

के float-leftबजाय का उपयोग करें pull-left। और के float-rightबजाय pull-right।

यहां बूटस्ट्रैप डॉक्यूमेंटेशन देखें :

जोड़ा गया .float- {sm, md, lg, xl} - {बाएं, दाएं, कोई नहीं} उत्तरदायी फ्लैट्स के लिए कक्षाएं .pull-left और .pull-right चूंकि वे अनावश्यक हैं .float-left और .float-। सही।

Answer 7

मैं अपनी परियोजना में निम्न वर्गों के साथ ऐसा करने में सक्षम था

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">

Answer 8

मेरे लिए और कुछ काम नहीं कर रहा था। यह एक किया। यह किसी की मदद कर सकता है।

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

क्लियरफिक्स डिव में सब कुछ लपेटना प्रमुख है।

Comments

आपके पास 2 इनलाइन आइटम हैं, इसलिए उन्हें अपने भाई-बहनों के संबंध में उनके लिए एक ब्लॉक तत्व में होना चाहिए।

— राबर्ट वेन्ट

Answer 9

बूटस्ट्रैप -4 फ्लोटिंग के लिए क्लास फ्लोट-लेफ्ट या राइट जोड़ें

Comments

ढेर अतिप्रवाह में आपका स्वागत है! दुर्भाग्य से यह पोस्ट प्रश्न का उत्तर देने के लिए उपलब्ध नहीं है । कृपया या तो अपना उत्तर संपादित करें और अधिक विवरण प्रदान करने का प्रयास करें।

— s --unıɐ ɐ qɐp

Answer 10

रॉबर्ट के अलावा किसी और के लिए, यदि आपकी नौसेना में फ्लेक्स डिस्प्ले वैल्यू है, तो आप उस तत्व को फ्लोट कर सकते हैं, जिसे आपको अपनी सीएसएस में जोड़कर दाईं ओर की जरूरत है

{
    margin-left: auto;
}

Comments

इसके लिए कक्षाएं भी हैं ml-autoऔरmr-auto

— रॉबर्ट वेंट