时间戳

首页 > 解决方案 > 使用 Bootstrap 在表格中将文本右对齐

css - 使用 Bootstrap 在表格中将文本右对齐

问题描述

作为我学习 Bootstrap 实验的一部分，我创建了一个表格，但实际上没有使用任何与制作表格相对应的标签。相反，我使用了网格系统。虽然它看起来不错，但我想知道是否有办法将数字对齐到右边？我提供了一个 JSFiddle 链接来向您展示我的想法。任何帮助或线索表示赞赏。

https://jsfiddle.net/silosc/9jbd1rpw/2/

<div class="container-xl">
  <div class="report-card-weekly-report">
    <div class="CompanyName">
      <h1>Weekly Summary for John's Groceries</h1>
      <h4> Week Ending: 01/20/2010</h4>
    </div>

    <br />
    <div class="row">
      <div class="col-sm-2">
      </div>
      <div class="col-sm-2">
        <p>Number of Sales</p>
      </div>
      <div class="col-sm-2">
        <p>Total earnings</p>
      </div>
      <div class="col-sm-2">
        <p>Taxes charged</p>
      </div>
      <div class="col-sm-2">
        <p>Refunds</p>
      </div>
      <div class="col-sm-2">
        <p>Deliveries</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h2>Total numbers</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <p>Numbers for the week</p>
      </div>
      <div class="col-sm-2">
        21,922
      </div>
      <div class="col-sm-2">
        $0.00
      </div>
      <div class="col-sm-2">
        $304,431.37
      </div>
      <div class="col-sm-2">
        $0.00
      </div>
      <div class="col-sm-2">
        $0.00
      </div>
    </div>
  </div>
</div>


<style>
  .CompanyName {
    text-align: center;
  }
  
  h2 {
    color: orangered;
    margin-left: 15px;
  }
  
  p {
    font-weight: bold;
    font-size: 15px;
    margin-left: 15px;
  }
  
  p1 {
    text-align: right;
  }
</style>

标签： cssbootstrap-4

解决方案

您可以使用text-right引导程序的属性将所需的文本向右对齐。这是一小段代码，向您展示它将如何在您的示例中工作。

  <div class="col-sm-2 text-right">
       21,922
  </div>

同样，您也可以使用text-left属性将文本左对齐。

推荐阅读