วิธีที่ถูกต้องในbootstrapการลอย div ไปทางขวาคืออะไร? ฉันคิดว่าpull-rightเป็นวิธีการแนะนำ แต่มันไม่ทำงาน

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

คุณมีสอง span6 divs ภายในแถวของคุณเพื่อที่จะใช้เวลาทั้ง 12 ช่วงที่แถวถูกสร้างขึ้น

การเพิ่มแรงดึงไปที่ช่วงที่สอง div 6 จะไม่ทำอะไรกับมันเลยเพราะมันนั่งอยู่ทางด้านขวาแล้ว

ถ้าคุณหมายถึงคุณต้องการให้ข้อความอยู่ในช่วงที่ 6 div 6 ที่จัดชิดขวาแล้วง่าย ๆ เพิ่ม class ใหม่ให้กับ div นั้นและให้ text-align: right value เช่น

.myclass {
    text-align: right;
}

UPDATE:

EricFreese ชี้ให้เห็นว่าใน Bootstrap 2.3 (สัปดาห์ที่แล้ว) พวกเขาได้เพิ่มคลาสยูทิลิตี้จัดแนวข้อความที่คุณสามารถใช้:

• .text-left
• .text-center
• .text-right

http://twitter.github.com/bootstrap/base-css.html#typography

หากต้องการลอย div ไปทางขวาpull-rightเป็นวิธีที่แนะนำฉันรู้สึกว่าคุณกำลังทำสิ่งที่ถูกต้องคุณอาจจำเป็นต้องใช้text-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

bootstrap 3 มีคลาสสำหรับจัดแนวข้อความภายใน div

<div class="text-right">

จะจัดแนวข้อความทางด้านขวา

<div class="pull-right">

จะดึงไปทางขวาเนื้อหาทั้งหมดไม่เพียง แต่ข้อความ

นี่เป็นการหลอกลวงโดยไม่จำเป็นต้องเพิ่มสไตล์อินไลน์

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

คำตอบอยู่ในการซ้อนกัน<div>กับคลาส "ดึงขวา" การรวมสองคลาสเข้าด้วยกันจะไม่ทำงาน

<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

งานนี้สำหรับฉัน

แก้ไข: ตัวอย่างพร้อมตัวอย่างของคุณ:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>

คุณสามารถกำหนดชื่อคลาสเช่น text-center ซ้ายหรือขวา ข้อความจะจัดเรียงตามชื่อคลาสเหล่านี้ คุณไม่จำเป็นต้องสร้างชื่อคลาสพิเศษแยกกัน คลาสเหล่านี้ถูกสร้างขึ้นใน BootStrap 3 และ bootstrap 4

Bootstrap 3

เอกสารการจัดตำแหน่งข้อความ v3

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

เอกสารการจัดตำแหน่งข้อความ v4

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>