Có một tập hợp các lớp trong khung Bootstrap của Twitter căn chỉnh văn bản không?

Ví dụ: tôi có một số bảng có $tổng số mà tôi muốn căn chỉnh sang phải ...

<th class="align-right">Total</th>

và

<td class="align-right">$1,000,000.00</td>

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>

Sử dụng Bootstrap 3.x bằng cách sử dụng text-righthoạt động hoàn hảo:

<td class="text-right">
  text aligned
</td>

Không, Bootstrap không có lớp cho điều đó, nhưng loại lớp này được coi là lớp "tiện ích", tương tự như lớp ".pull-right" mà @anton đã đề cập.

Nếu bạn nhìn vào các tiện ích. Không có bạn sẽ thấy rất ít lớp tiện ích trong Bootstrap, lý do là loại lớp này thường được tán thành và được khuyến nghị sử dụng cho: a) tạo mẫu và phát triển - để bạn có thể nhanh chóng xây dựng ra khỏi các trang của bạn, sau đó loại bỏ các lớp kéo sang phải và kéo sang trái để ưu tiên áp dụng các số float cho các lớp ngữ nghĩa hơn hoặc cho chính các phần tử, hoặc b) khi nó rõ ràng thực tế hơn một giải pháp ngữ nghĩa hơn.

Trong trường hợp của bạn, theo câu hỏi của bạn, có vẻ như bạn muốn có một văn bản nhất định nằm bên phải trong bảng của bạn, nhưng không phải tất cả. Về mặt ngữ nghĩa, sẽ tốt hơn nếu làm một cái gì đó như (Tôi sẽ tạo ra một vài lớp ở đây, ngoại trừ lớp bootstrap mặc định, .table):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

Và chỉ cần áp dụng text-align: lefthoặc text-align: rightkhai báo cho các lớp giá-giá và nhãn giá (hoặc bất kỳ lớp nào phù hợp với bạn).

Vấn đề với việc áp dụng align-rightnhư một lớp, là nếu bạn muốn cấu trúc lại các bảng của mình, bạn sẽ phải làm lại đánh dấu và các kiểu. Nếu bạn sử dụng các lớp ngữ nghĩa, bạn có thể thoát khỏi việc tái cấu trúc chỉ nội dung CSS. Ngoài ra, nếu dành thời gian để áp dụng một lớp cho một phần tử, cách tốt nhất là cố gắng gán giá trị ngữ nghĩa cho lớp đó để việc đánh dấu dễ dàng điều hướng hơn cho các lập trình viên khác (hoặc bạn ba tháng sau).

Một cách để nghĩ về nó là thế này: khi bạn đặt ra câu hỏi "Cái này là gì?", Bạn sẽ không nhận được sự làm rõ từ câu trả lời "align-right".

Bootstrap 2.3 có các lớp tiện ích text-left, text-rightvà text-center, nhưng họ không làm việc trong các tế bào bảng. Cho đến khi Bootstrap 3.0 được phát hành (nơi họ đã khắc phục sự cố) và tôi có thể thực hiện chuyển đổi, tôi đã thêm phần này vào CSS trang web của mình được tải sau bootstrap.css:

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

Chỉ cần thêm biểu định kiểu "tùy chỉnh" được tải sau biểu định kiểu Bootstrap. Vì vậy, các định nghĩa lớp bị quá tải.

Trong biểu định kiểu này khai báo căn chỉnh như sau:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Bây giờ bạn có thể sử dụng các quy ước căn chỉnh "chung" cho các phần tử td và th.

Tôi đoán bởi vì CSS đã có text-align:right, AFAIK, Bootstrap không có lớp đặc biệt cho nó.

Bootstrap không có "pull-right" cho các div nổi, v.v. ở bên phải.

Bootstrap 2.3 vừa xuất hiện và thêm các kiểu căn chỉnh văn bản:

Bootstrap 2.3 được phát hành (2013/02/07)

Bootstrap 4 đang đến ! Các lớp tiện ích được làm quen trong Bootstrap 3.xhiện được bật điểm ngắt. Các breakpoint mặc định là: xs, sm, md, lgvà xl, do đó, những lớp liên kết văn bản giống như thế .text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

Quan trọng: Khi viết bài này, Bootstrap 4 chỉ có trong Alpha 2. Các lớp này và cách chúng được sử dụng có thể thay đổi mà không cần thông báo trước.

Căn chỉnh văn bản Bootstrap trong v3.3.5:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

Ví dụ CodePen

Các dòng mã sau đây đang hoạt động đúng. Bạn có thể gán các lớp như trung tâm văn bản, bên trái hoặc bên phải, Văn bản sẽ căn chỉnh tương ứng.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

Ở đây không có nhu cầu tạo bất kỳ lớp bên ngoài nào. Đây là các lớp Bootstrap và có tài sản riêng của họ.

Bạn có thể sử dụng CSS này dưới đây:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

Các .text-alignlớp học là hoàn toàn hợp lệ và nhiều hơn nữa có thể sử dụng hơn so với việc có một .price-labelvà .price-valueđó là không sử dụng nữa.

Tôi khuyên bạn nên đi 100% với một lớp tiện ích tùy chỉnh được gọi là

.text-right {
  text-align: right;
}

Tôi thích làm một số phép thuật, nhưng đó là tùy thuộc vào bạn, như một cái gì đó:

span.pull-right {
  float: none;
  text-align: right;
}

Dưới đây là một câu trả lời ngắn gọn và ngọt ngào với một ví dụ.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

Mở rộng câu trả lời của David , tôi chỉ cần thêm một lớp đơn giản để tăng thêm Bootstrap như thế này:

.money, .number {
    text-align: right !important;
}

Ow, với việc phát hành Bootstrap 3, bạn có thể sử dụng các lớp text-centercho căn chỉnh trung tâm, text-left cho căn lề trái, text-rightcho căn lề phải và text-justifycho căn chỉnh hợp lý.

Bootstrap là một khung công tác frontend rất đơn giản để làm việc, một khi bạn sử dụng nó. Cũng như rất dễ dàng để tùy chỉnh để phù hợp với ý thích của bạn.

Chúng tôi có năm lớp cho điều đó, mà bạn có thể tham khảo từ đây: http://v4-alpha.getbootstrap.com/components/utilities/

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

Đây là giải pháp đơn giản nhất

Bạn có thể gán các 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 các lớp này. Bạn không phải tạo các lớp riêng biệt. Các lớp này được tích hợp sẵn trong BootStrap 3

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

Kiểm tra tại đây: Demo

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

Trong phiên bản Bootstrap 4. Có một số lớp sẵn có để định vị văn bản.

Đối với tiêu đề bảng trung tâm và văn bản dữ liệu:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

Bạn cũng có thể sử dụng các lớp này để định vị bất kỳ văn bản.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

Để biết thêm chi tiết

Hy vọng nó sẽ giúp bạn.

Trong ba lớp Bootstrap không hợp lệ này

 .text-right {
     text-align: right; }

 .text-center {
     text-align: center; }

 .text-left {
    text-align: left; }

Sử dụng text-align:center !important. Có thể có các text-alignquy tắc css khác vì vậy rất !importantquan trọng.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>