ฉันจะทำให้ปุ่ม Twitter Bootstrap จัดเรียงถูกต้องได้อย่างไร


452

ฉันมีตัวอย่างง่ายๆที่นี่:

http://jsfiddle.net/HdeZ3/1/

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

ฉันมีรายการที่ไม่ได้เรียงลำดับและสำหรับรายการแต่ละรายการฉันต้องการให้ข้อความทางด้านซ้ายแล้วปุ่มจัดตำแหน่งทางขวา ฉันพยายามใช้ pull-right แต่มันทำให้การจัดแนวนั้นยุ่งเหยิงไปหมด ผมทำอะไรผิดหรือเปล่า?


5
ทำไมคำถามนี้ติดแท็กด้วยtwitter-bootstrap-3และtwitter-bootstrap-2เช่นเดียวกับtwitter-bootstrap ?
Andrew Grimm

5
เพราะมันเกี่ยวข้องกับทุกรุ่นตั้งแต่ 3/2013
Zim

คำตอบ:


693

แทรกpull-rightลงในแอตทริบิวต์ class และให้ bootstrap จัดเรียงปุ่ม

สำหรับBootstrap 2.3ดูที่: http://getbootstrap.com/2.3.2/components.html#misc > คลาส Helper> .pull-right

สำหรับ Bootstrap 3ดูที่: https://getbootstrap.com/docs/3.3/css/#helper-classes > คลาส Helper


สำหรับ Bootstrap 4โปรดดู: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-rightคำสั่งจะถูกลบออกไปและแทนที่ด้วยfloat-rightหรือทั่วไปfloat-{sm,md,lg,xl}-{left,right,none}


18
ฉันไม่เข้าใจคำตอบนี้ pull-rightในคำถามโค้ดตัวอย่างที่มีอยู่แล้วโดยใช้
guival

@guival ฉันสงสัยในสิ่งเดียวกัน stackoverflow.com/a/26546770/470749หมายความว่าการใช้buttonแทนที่จะinputสร้างความแตกต่าง
Ryan

@ Ryan ใช้งานได้กับฉันทั้งในอินพุตและปุ่ม
Lesther

@aronadaal มันใช้งานได้สำหรับฉันขอบคุณ!
Houari Zegai

249

ใน twitter bootstrap 3 ลองใช้คลาสpull-right

class="btn pull-right"

4
ไม่ใช่อีกต่อไปมันเลิกใช้ตั้งแต่วันที่ 3.1: getbootstrap.com/components/#dropdowns-alignment
ılǝ

9
+1 สำหรับการเน้นการเปลี่ยนแปลง แต่ค่าเสื่อมราคานั้นใช้สำหรับเมนูแบบเลื่อนลงเท่านั้นซึ่งถูกแทนที่ด้วย. dropdown-menu-right มันไม่ได้ถูกคัดค้านโดยรวม
Shawn Vader

คุณพูดถูกเอกสารประกอบบอกว่าwe've deprecated .pull-right on dropdown menus
ılǝ

3
ฉันต้องใช้ pull-right ใน div btn-group ด้านนอก: <div class = "btn-group pull-right">
Gerfried

17
pull-rightการใช้float: rightงานดังนั้นจึงยุบเนื้อหาแนวตั้งที่ด้านบนของกันและกัน ล้อมปุ่มด้วยtext-rightDIV เช่นนี้ -<div class="text-right">button...</div>
hashbrown

137

คลาส "pull-right" อาจไม่ใช่วิธีที่ถูกต้องเนื่องจากในการใช้ "float: right" แทนที่จะเป็นการจัดแนวข้อความ

ตรวจสอบไฟล์ bootstrap 3 css ที่ฉันพบคลาส "text-right" ที่บรรทัด 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
ฉันคิดว่ามันดีกว่า pull-right เพราะมันป้องกันเนื้อหาแนวตั้งไม่ให้ยุบทับกันและหลีกเลี่ยงการเพิ่ม mark-up เพื่อหลีกเลี่ยงปัญหานั้น
Tony Wall

2
ขอบคุณ. ปัญหาเกี่ยวกับ "ดึงขวา" คือการลบระยะขอบใด ๆ ออกจากปุ่ม สิ่งนี้จะรักษาระยะขอบ แต่ย้ายองค์ประกอบไปทางขวา ที่สมบูรณ์แบบ!
PR Whitehead

เหตุใดข้อความด้านขวาจะต้องอยู่ในปุ่มต่อไปนี้แทนที่จะเป็นเพียงclass="btn btn-default text-right"ปุ่ม ???
Krystian Polska

50

อัปเดต 2019 - Bootstrap 4.0.0

pull-rightชั้นอยู่ในขณะนี้float-rightใน Bootstrap 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

นอกจากนี้ยังเป็นการดีกว่าหากไม่จัดแนวรายการ ul และใช้องค์ประกอบบล็อกสำหรับแถว

คือfloat-rightยังไม่ทำงาน?

โปรดจำไว้ว่าBootstrap 4 เป็น flexbox ในขณะนี้และองค์ประกอบหลายอย่างdisplay:flexที่สามารถป้องกันการลอยได้ทันทีจากการทำงาน ในบางกรณีคลาส util เช่นalign-self-endหรือml-autoทำงานเพื่อจัดตำแหน่งองค์ประกอบที่อยู่ภายในคอนเทนเนอร์ flexbox เช่น Bootstrap 4 .row, Card หรือ Nav

ยังจำได้ว่าtext-rightยังคงทำงานกับองค์ประกอบแบบอินไลน์

Bootstrap 4 จัดเรียงตัวอย่างที่ถูกต้อง


Bootstrap 3

ใช้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>

จากนั้นใช้ CSS ต่อไปนี้สำหรับชั้นเรียน

.RbtnMargin { margin-left: 5px; }

18

การเพิ่มคำตอบที่ยอมรับเมื่อทำงานภายในคอนเทนเนอร์และคอลัมน์ที่มีอยู่แล้วภายในจากการบูทสแตรปบางครั้งฉันก็มีคอลัมน์ที่ยืดออกเต็มพร้อมกับ div ลูกที่ทำให้การดึงเป็นไปได้

<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>

12

ขออภัยที่ตอบคำถามเก่าที่ตอบแล้ว แต่ฉันคิดว่าฉันชี้ให้เห็นเหตุผลสองประการที่ jsfiddle ของคุณใช้งานไม่ได้ในกรณีที่คนอื่นลองดูและสงสัยว่าทำไมคลาสดึงขวาตามที่อธิบายไว้ในคำตอบที่ยอมรับไม่ได้ ไม่ได้ทำงานที่นั่น

  1. URL ไปยังไฟล์ bootstrap.css ไม่ถูกต้อง (อาจใช้ได้เมื่อคุณถามคำถาม)
  2. คุณควรเพิ่มแอททริบิวต์: type = "button" ให้กับอิลิเมนต์อินพุตของคุณมิฉะนั้นจะไม่ถูกแสดงผลเป็นปุ่ม - มันจะถูกแสดงผลเป็นกล่องอินพุต ดีกว่าใช้<button>องค์ประกอบแทน
  3. นอกจากนี้เนื่องจาก pull-right ใช้โฟลทคุณจะได้รับการจัดวางปุ่มบางอย่างเนื่องจากแต่ละ LI มีความสูงไม่เพียงพอที่จะรองรับความสูงของปุ่ม การเพิ่มความสูงของบรรทัดหรือ css ความสูงขั้นต่ำลงใน 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-blockblockองค์ประกอบที่จะกลายเป็น และเมื่อสิ่งเหล่านั้น.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

ในBootstrap 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>




2

คุณสามารถลอง CSS ที่กำหนดเองนอกเหนือจาก bootstrap CSS เพื่อดูว่ามีการเปลี่ยนแปลงหรือไม่ ลอง

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

หากใช้งานได้คุณสามารถลองจัดการกับสิ่งที่คุณมีหรือเพิ่มการจัดรูปแบบอื่น ๆ ลงในสิ่งนี้และบรรลุสิ่งที่คุณต้องการ เนื่องจากคุณใช้ bootstrap ไม่ได้หมายความว่าจะไม่ให้สิ่งที่คุณต้องการจากนั้นคุณก็จัดการมัน คุณกำลังทำงานกับรหัสของคุณและคุณสั่งให้ทำตามที่คุณพูด ไชโย!


5
ไม่จำเป็นต้องให้ CSS ที่กำหนดเองเป็นทุกคำตอบของการแสดงอื่น ๆ ที่จำเป็นจะรวมอยู่ในบูต
chrisweb

@chrisweb จะเกิดอะไรขึ้นถ้าคุณมีปลั๊กอินอื่น ๆ ที่ใช้ CSS คลาสเดียวกันร่วมกันที่คุณไม่รู้จักและปัญหาที่ขัดแย้งกันคุณจะทำอย่างไร นั่งดูมากกว่าสร้าง CSS ที่กำหนดเองและย้ายไป? OP ไม่เคยระบุหากมีการเพิ่มปลั๊กอินอื่น ๆ ที่อาจแชร์คลาส css เดียวกัน
OmniPotens

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>

ฉันเพิ่งใช้เลย์เอาต์ .. ใช้สไตล์สำหรับ li ..

หรือ

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

ใน CSS

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

สำหรับฉันนี่ทำให้รายการทั้งสองรายการอยู่ในบรรทัดเดียว
deltanovember

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


1

จากBootstrap V3.3.1สไตล์ CSS ต่อไปนี้จะช่วยแก้ปัญหานี้

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

หมายเหตุ: ฉันลองคำแนะนำทั้งหมดในโพสต์ด้านบนและระบุที่อยู่เวอร์ชันที่เก่ากว่าทั้งหมดและไม่ได้ให้การแก้ไขสำหรับ bootstrap เวอร์ชั่นของ newset


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.