मैं अपने ट्विटर बूटस्ट्रैप बटन को दाएं संरेखित कैसे कर सकता हूं?

452

मेरा यहाँ एक सरल डेमो है:

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

मेरे पास एक अनियंत्रित सूची है और प्रत्येक सूची आइटम के लिए मैं बाईं ओर पाठ और फिर दाएं संरेखित बटन की इच्छा रखता हूं। मैंने पुल-राइट का उपयोग करने की कोशिश की है लेकिन यह पूरी तरह से संरेखण को गड़बड़ कर देता है। मैं क्या गलत कर रहा हूं?

— deltanovember
स्रोत

5

क्यों इस सवाल के साथ टैग है चहचहाना-बूटस्ट्रैप -3 और चहचहाना-बूटस्ट्रैप -2 के साथ ही ट्विटर बूटस्ट्रैप- ?

— एंड्रयू ग्रिम

5

क्योंकि यह 3/2013 के बाद से सभी संस्करणों के लिए प्रासंगिक है

— Zim

693

pull-rightवर्ग विशेषता में सम्मिलित करें और बूटस्ट्रैप बटन को व्यवस्थित करें।

के लिए बूटस्ट्रैप 2.3 , देखें: http://getbootstrap.com/2.3.2/components.html#misc > हेल्पर कक्षाएं> .pull-सही।

के लिए बूटस्ट्रैप 3 , देखें: https://getbootstrap.com/docs/3.3/css/#helper-classes > हेल्पर कक्षाएं।

के लिए बूटस्ट्रैप 4 , देखें: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-rightआदेश हटा दिया गया था और साथ बदल दिया float-rightया सामान्य करने के लिएfloat-{sm,md,lg,xl}-{left,right,none}

— aronadaal
स्रोत

18

मुझे यह उत्तर समझ में नहीं आता है। प्रश्न में उदाहरण कोड पहले से ही उपयोग कर रहा है pull-right।

— 10

@guival मैं वही सोच रहा था। stackoverflow.com/a/26546770/470749 का तात्पर्य है कि buttonइसके बजाय का उपयोग करने से inputफर्क पड़ेगा।

— रयान

@ रयान यह मुझ पर काम करता है, इनपुट और बटन दोनों में

— Lesther

@aronadaal यह मेरे लिए काम कर रहा है, धन्यवाद!

— होउरी ज़गई

249

ट्विटर बूटस्ट्रैप 3 में वर्ग पुल-राइट की कोशिश करें

class="btn pull-right"

— शॉन वडर
स्रोत

4

अब नहीं, यह v 3.1 के रूप में पदावनत किया गया: getbootstrap.com/compenders/#dropdowns-alignment

— ılǝ

9

परिवर्तन को उजागर करने के लिए +1। लेकिन यह मूल्यह्रास केवल ड्रॉप डाउन मेनू के लिए है जिसे बदल दिया गया है। इसका समग्र रूप से चित्रण नहीं किया गया है।

— शॉन वडर

आप सही हैं, प्रलेखन कहता हैwe've deprecated .pull-right on dropdown menus

— ıl right

3

मुझे बाहरी btn-group div में पुल-राइट का उपयोग करना था: <div class = "btn-group pull-right">

— Gerfried

17

pull-rightउपयोग करता है float: right, जिससे एक दूसरे के ऊपर लंबवत सामग्री टकराती है। text-rightDIV के साथ बटन को इस तरह लपेटें -<div class="text-right">button...</div>

— हैशब्रोव

137

"पुल-राइट" वर्ग सही तरीका नहीं हो सकता है क्योंकि टेक्स्ट-संरेखण के बजाय "फ्लोट: राइट" का उपयोग करता है।

बूटस्ट्रैप 3 सीएसएस फ़ाइल की जांच करने पर मुझे लाइन 457 पर "टेक्स्ट-राइट" क्लास मिली। इस क्लास को टेक्स्ट को दाईं ओर संरेखित करने का सही तरीका होना चाहिए।

कुछ कोड:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

— सेसर लियोन
स्रोत

6

मुझे लगता है कि यह पुल-राइट से बेहतर है क्योंकि यह वर्टिकल कंटेंट को एक-दूसरे के ऊपर से टकराने से रोकता है और इससे बचने के लिए अधिक मार्क-अप जोड़ने से बचा जाता है।

— टोनी वॉल

2

धन्यवाद। "पुल-राइट" के साथ समस्या यह है कि यह बटन से किसी भी मार्जिन को हटा देता है। यह मार्जिन को बनाए रखता है लेकिन तत्वों को दाईं ओर ले जाता है। उत्तम!

— पीआर व्हाइटहेड

क्यों पाठ-अधिकार सिर्फ बटन में इस बटन के बजाय div बटन में होना चाहिए class="btn btn-default text-right"???

— क्रिस्चियन

50

अपडेट 2019 - बूटस्ट्रैप 4.0.0

pull-rightवर्ग अब है float-rightबूटस्ट्रैप 4 में ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

उल सूची को संरेखित नहीं करना और पंक्तियों के लिए ब्लॉक तत्वों का उपयोग करना भी बेहतर है।

है float-rightअभी भी काम नहीं?

याद रखें कि बूटस्ट्रैप 4 अब फ्लेक्सबॉक्स है , और कई तत्व हैं display:flexजो फ्लोट-राइट को काम करने से रोक सकते हैं । कुछ मामलों में, util वर्गों की तरह align-self-endया ml-autoसही संरेखित तत्वों है कि एक बूटस्ट्रैप 4 .row, कार्ड या एनएवी की तरह एक flexbox कंटेनर के अंदर कर रहे हैं करने के लिए काम करते हैं।

यह भी याद रखें कि text-rightअभी भी इनलाइन तत्वों पर काम करता है।

बूटस्ट्रैप 4 सही उदाहरणों को संरेखित करता है

बूटस्ट्रैप ३

pull-rightकक्षा का उपयोग करें ।

— Zim
स्रोत

वे मेरे लिए काम कर रहे हैं, लेकिन आपको लिंक पर भरोसा करने की आवश्यकता नहीं है। सही संरेखित करने के तरीके के बारे में स्पष्टीकरण के लिए उत्तर पढ़ें।

— जिम

19

buttonटैग inputऔर उपयोग pull-rightवर्ग के बजाय टैग का उपयोग करें ।

pull-right कक्षा आपके दोनों बटनों को पूरी तरह से गड़बड़ कर देती है, लेकिन आप दाईं ओर कस्टम मार्जिन को परिभाषित करके इसे ठीक कर सकते हैं।

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

फिर वर्ग के लिए निम्नलिखित सीएसएस का उपयोग करें

.RbtnMargin { margin-left: 5px; }

— शहजाद महमूद
स्रोत

18

स्वीकृत उत्तर में जोड़ते हुए, जब बूटस्ट्रैप से पेडिंग में बनाए गए कंटेनरों और स्तंभों के भीतर काम करते हैं, तो मुझे कभी-कभी एक चाइल्ड डिव के साथ एक पूर्ण फैला हुआ कॉलम होता है जो खींचने का रास्ता तय करता है।

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

वैकल्पिक रूप से, आपके सभी कॉलमों में पहले कॉलम के ऑफ़सेट होने के साथ-साथ आपके कुल ग्रिड कॉलम (डिफ़ॉल्ट रूप से 12) तक होते हैं।

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

— yuvilio
स्रोत

12

पहले से ही उत्तर में दिए गए प्रश्न का उत्तर देने के लिए क्षमा करें, लेकिन मैंने सोचा कि मैं कुछ ऐसे कारणों की ओर इशारा करता हूं जो आपके jsfiddle के काम नहीं आते हैं, यदि अन्य लोग इसकी जांच करते हैं और आश्चर्यचकित होते हैं कि स्वीकृत उत्तर के रूप में पुल-राइट क्लास को क्यों बताया गया? 'वहाँ काम नहीं करते।

url bootstrap.css फ़ाइल में अमान्य है। (शायद यह सवाल पूछने पर काम आए)।
आपको अपने इनपुट तत्व में विशेषता: प्रकार = "बटन" जोड़ना चाहिए, या इसे एक बटन के रूप में प्रस्तुत नहीं किया जाएगा - यह एक इनपुट बॉक्स के रूप में प्रदान किया जाएगा। बेहतर अभी तक, <button>बजाय तत्व का उपयोग करें ।
इसके अतिरिक्त, क्योंकि पुल-राइट फ़्लोट्स का उपयोग करता है, आपको बटन लेआउट के कुछ चौंका देने वाले मिलेंगे क्योंकि प्रत्येक LI में बटन की ऊंचाई को समायोजित करने के लिए पर्याप्त ऊंचाई नहीं है। LI के लिए कुछ लाइन-ऊंचाई या न्यूनतम ऊंचाई सीएसएस जोड़ने से पता चलेगा।

काम कर रहे बेला: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(मैंने बटनों में एक मिन-चौड़ाई भी जोड़ दी क्योंकि मैं अलग-अलग चौड़ाई के कारण बटनों को एक दांतेदार सही औचित्य के रूप में खड़ा नहीं कर सकता था :))

— एलन निनहुई
स्रोत

11

बूटस्ट्रैप pull-rightहेल्पर का उपयोग करना हमारे लिए काम नहीं करता क्योंकि यह उपयोग करता है float: right, जो तत्वों को बनने के लिए मजबूर inline-blockकरता हैblock । और जब .btnएस बन जाते हैं block, तो वे प्राकृतिक मार्जिन खो देते हैं जो inline-blockउन्हें अर्ध-पाठीय तत्वों के रूप में प्रदान कर रहा था।

इसलिए इसके बजाय हम direction: rtl;मूल तत्व पर उपयोग करते हैं, जो उस तत्व के अंदर के पाठ को दाएं से बाएं inline-blockलेआउट के लिए कारण बनता है, और यह तत्वों को दाएं से बाएं से लेआउट का कारण बनता है। बच्चों को बाहर ले जाने से रोकने के लिए आप निम्न की तरह LESS का उपयोग कर सकते हैं rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

और इसका उपयोग करें:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

— कार्ल जी
स्रोत

7

में बूटस्ट्रैप 4 : flexbox साथ इस तरह की कोशिश करो। Getbootstrap में प्रलेखन देखें

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

— शहरयार अहमद
स्रोत

4

पुल अधिकार को v3.1.0 के रूप में मूल्यह्रास किया गया था। बिलकुल चौकन्ना।

http://getbootstrap.com/components/#callout-dropdown-pull-right

— n1nja
स्रोत

4

pull-rightपर पदावनत किया जाता है dropdown-menu। यह अभी भी अन्य घटकों के लिए इस्तेमाल किया जा सकता है।

— पित्र

4

pull-rightबटन के लिए कक्षा लागू करें। http://getbootstrap.com/css/#helper-classes-floats -> हेल्पर कक्षाएं

यह लिंक मदद करेगा

— अभिजीत कुलकर्णी
स्रोत

3

अब आपको .dropdown-menu-right को मौजूदा .dropdown-menu तत्व में जोड़ने की आवश्यकता है। पुल-राइट अब समर्थित नहीं है। अधिक जानकारी यहाँ http://getbootstrap.com/compenders/#btn-dropdowns

— डैन ओचियाना
स्रोत

2

क्या आप किसी बदलाव को देखने के लिए बूटस्ट्रैप सीएसएस से अलग एक कस्टम सीएसएस आज़मा सकते हैं। प्रयत्न

.move-rigth{
    display: block;
    float: right;
}

यदि यह काम करता है तो आप हेरफेर करने की कोशिश कर सकते हैं जो आपके पास है या इसमें अन्य स्वरूपण जोड़ सकते हैं और जो आप चाहते हैं उसे प्राप्त कर सकते हैं। क्योंकि आप बूटस्ट्रैप का उपयोग कर रहे हैं, इसका मतलब यह नहीं है कि यह आपको वह नहीं देता है जो आप चाहते हैं तो आप इसे प्रबंधित करते हैं। आप अपने कोड के साथ काम कर रहे हैं और इसलिए आप जैसा कहते हैं वैसा करने की आज्ञा देते हैं। चीयर्स!

— OmniPotens
स्रोत

5

कस्टम सीएसएस की कोई आवश्यकता नहीं है, क्योंकि अन्य उत्तर से पता चलता है कि आवश्यक सभी चीज़ों को बूटस्ट्रैप में शामिल किया गया है

— chrisweb

@chrisweb क्या होगा अगर आपके पास कुछ अन्य प्लगइन्स हैं जो समान सीएसएस वर्ग को आपके लिए अज्ञात और परस्पर विरोधी मुद्दों को साझा करते हैं, तो आप क्या करते हैं? बैठो और देखो एक कस्टम सीएसएस बनाने और आगे बढ़ने से? ओपी ने कभी निर्दिष्ट नहीं किया अगर कोई अन्य प्लगइन्स जोड़े गए जो समान सीएसएस कक्षाएं साझा कर सकते हैं।

— ओमनीपोटेंस

2

<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

मैं सिर्फ लेआउट के लिए इस्तेमाल किया .. ली के लिए शैलियों।

या

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

सीएसएस में

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

— शशि
स्रोत

मेरे लिए यह दोनों सूची वस्तुओं को एक ही पंक्ति में डालता है

— deltanvent

2

आप बाईं ओर रिक्त स्थान देने के लिए रिक्त कॉलम का भी उपयोग कर सकते हैं

पसंद

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

डेमो :: Jsfiddle डेमो

— user889030
स्रोत

1

से बूटस्ट्रैप V3.3.1 निम्नलिखित सीएसएस शैली इस मुद्दे का समाधान होगा

.modal-open{
    padding-right: 0 !important;
}

नोट: मैंने ऊपर दिए गए पोस्टों में सभी सुझावों की कोशिश की और सभी पुराने संस्करणों को संबोधित किया और न्यूज़ बूटस्ट्रैप संस्करणों के लिए एक निर्धारण प्रदान नहीं किया।

— उड़ी लुकाच
स्रोत

-1

बूटस्ट्रैप 4 प्रलेखन के लिए

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>

— वलोडिमिर पेटलोवी
स्रोत

संरेखित दाएं और बटन के साथ इसका क्या करना है?

— ज़िम