Twitter bootstrap float div right

Question

Cách thích hợp trong bootstrap để thả một div sang bên phải là gì? Tôi nghĩ rằng pull-right là 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>

Answer 1

Bạn có hai divs span6 trong hàng của bạn do đó sẽ mất toàn bộ 12 kéo dài mà liên tiếp được tạo thành.

Thêm quyền kéo vào div6 thứ hai sẽ không làm bất kỳ điều gì với nó vì nó đã được đặt ở bên phải.

Nếu bạn muốn có văn bản trong div thứ hai span6 được căn chỉnh ở bên phải, hãy thêm một lớp mới vào div đó và gán cho nó văn bản căn chỉnh: đúng giá trị ví dụ:

.myclass { 
    text-align: right; 
} 

---

UPDATE:

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

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

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

Answer 2

Để nổi một div bên phải pull-right là cách giới thiệu, tôi cảm thấy bạn đang làm điều đúng đắn có thể bạn chỉ cần sử dụng 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> 

Answer 3

này hiện lừa, 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à tôi n làm tổ khác <div> với lớp "kéo phải". Kết hợp hai lớp sẽ không hoạt động.

Answer 4

bootstrap 3 có một lớp học để sắp xếp các văn bản trong một div

<div class="text-right"> 

sẽ sắp xếp các văn bản trên quyền

<div class="pull-right"> 

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

Answer 5

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

Tác phẩm này dành cho tôi.

chỉnh sửa: Ví dụ với đoạn mã 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>

Answer 6

Bạn có thể gán tên lớp như văn bản trung tâm, sang trái hoặc phải.Văn bản sẽ căn chỉnh cho phù hợp với tên lớp này. Bạn không cần phải đặt tên lớp phụ riêng biệt. Những lớp học được xây dựng trong bootstrap 3 và bootstrap 4.

Bootstrap 3

v3 Text Alignment Docs

<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 Text Alignment Docs

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