html - vertical - Bootstrap-內部表格的文本對齊類




pull-right bootstrap 4 (13)

Twitters Bootstrap Framework中是否有一組類將文本對齊?

例如,我有一些表格,總計我想與右邊對齊...

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

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

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>


這是最簡單的解決方案

您可以像文本中心,左或右分配類。 文本將相應地與這些類對齊。 你不必單獨製作課程。 這些類都內置在BootStrap 3中

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

點擊這裡: 演示


Ow,隨著引導程序3的發布,您可以使用text-center的類來進行中心對齊,左對齊的text-right ,右對齊的text-justify右對齊和對齊對齊的text-justify對齊。

一旦你使用它,Bootstrap是一個非常簡單的前端框架。 以及非常容易定制以適合您的喜好。


Bootstrap 4即將到來 ! 在Bootstrap 3.x中熟悉的實用程序類現在已啟用了斷點功能。 默認斷點是: xssmmdlgxl ,所以這些文本對齊類看起來像.text-[breakpoint]-[alignnment]

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

重要提示:在撰寫本文時,Bootstrap 4僅適用於Alpha 2.這些類以及它們的使用方式如有更改,恕不另行通知。


在這三類引導無效的類

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

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

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

這裡是簡短而又甜蜜的回答。

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>


你可以使用下面的這個CSS:

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

使用Bootstrap 3.x使用text-right完美地工作:

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

在v3.3.5中引導文本對齊。

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

CodePen示例


如果您使用Bootstrap 3.x

<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

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

Boostrap 4實用程序類在Bootstrap 3.x中很熟悉。 不同之處在於它現在可以啟用斷點功能。 默認斷點是: xs, sm, md, lg and xl,所以這些文本對齊類看起來像.text- [breakpoint] - [alignnment]



擴展David的答案,我只是添加一個簡單的類來增加Bootstrap,如下所示:

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

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
視口大小MD(中)或更寬的左對齊文本。

視口大小為LG(大)或更寬的左對齊文本。

視口大小為XL(超大)或更寬的左對齊文本。





text-align