html - 将货币数字与左 Bootstrap 对齐

您好，我在对齐一些货币数字时遇到了问题。我希望我的数据确实与列的左侧对齐，但是钱的数量必须像屏幕截图中那样相互关联。

这张截图是我的atm:

这是我想要做的:

这是我的结构:

<tr> 
  <td style="text-align: left">name</td>
  <td style="text-align: right">money</td>
  <td style="text-align: center">date</td>
</tr>

我唯一用于定位的 css atm 是将每个 td 的宽度设置为 30%

起初我以为我可以简单地通过放置一个 <p> 来定位它们。在那里将内容右对齐并赋予其余部分相对宽度，但是这种方式是可能的，但随后我得到了一堆我不想拥有的 js 或 jquery。

我已经安装了 bootstrap，但到目前为止我还没有真正在这个元素中接触过它，除了列网格定位。

有没有人有某种方法可以实现我正在尝试的目标，或者有人可以将我推向正确的方向？提前致谢。

补充:半完整代码示例: Codepen

上面的代码是表格所在的整个部分，但我复制了与问题相关的所有 css，而不是我的问题的每个 css 类都在那里重建，甚至是随机的 <p>我试过的标签就在那里。

最佳答案

您应该使用两列:

<div class="row">
  <div class="col-lg-6">List of money values</div>
  <div class="col-lg-6">[Empty]</div>
</div>

并在第一个中将文本右对齐:

<p class="text-right">Your text.</p>

关于html - 将货币数字与左 Bootstrap 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49915579/