Cách thích hợp bootstrapđể nổi một div sang phải là gì? Tôi nghĩ pull-rightlà cách giới thiệu, nhưng nó không hoạt động.

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

Bạn có hai div span6 trong hàng của mình, do đó sẽ chiếm toàn bộ 12 nhịp mà một hàng được tạo thành.

Thêm pull-right vào div span6 thứ hai sẽ không làm gì với nó vì nó đã ngồi bên phải.

Nếu bạn có nghĩa là bạn muốn có văn bản trong div span6 thứ hai được căn bên phải thì đơn giản thêm một lớp mới vào div đó và đặt cho nó giá trị text-align: right, vd

.myclass {
    text-align: right;
}

CẬP NHẬT:

EricFreese đã chỉ ra rằng trong phiên bản 2.3 của Bootstrap (tuần trước), họ đã thêm các lớp tiện ích căn chỉnh văn bản mà bạn có thể sử dụng:

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

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

Để nổi một div sang bên phải pull-rightlà cách được đề xuất, tôi cảm thấy bạn đang làm mọi thứ đúng có thể bạn chỉ cần sử dụngtext-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 có một lớp để căn chỉnh văn bản trong một div

<div class="text-right">

sẽ căn chỉnh văn bản bên phải

<div class="pull-right">

sẽ kéo sang bên phải tất cả nội dung không chỉ văn bản

Đây là một mẹo nhỏ mà không cần thêm kiểu nội tuyến

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

Câu trả lời là trong việc lồng nhau <div>với lớp "pull-right". Kết hợp hai lớp sẽ không hoạt động.

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

Công việc này cho tôi.

chỉnh sửa: Một ví dụ với đoạn trích của bạn:

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

Bạn có thể gán tên lớp như trung tâm văn bản, bên trái hoặc bên phải. Các văn bản sẽ phù hợp với tên lớp. Bạn không cần phải đặt tên lớp thêm. Các lớp này được xây dựng trong BootStrap 3 và bootstrap 4.

Bootstrap 3

Tài liệu căn chỉnh văn bản 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

Tài liệu căn chỉnh văn bản 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>