Bootstrap 4表格在表格单元格的右上角对齐一些文本答案

【问题标题】：Bootstrap 4 Table Align Some Text in Top Right of Table CellBootstrap 4表格在表格单元格的右上角对齐一些文本
【发布时间】：2021-02-20 06:22:35
【问题描述】：

我有一个包含 2 列的简单 Bootstrap 4 表 - 我希望能够将右上角列中的一些文本向右对齐，同时将该单元格中的剩余文本左对齐。

这是我的桌子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <div class="text-right">On Special</div>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

我正在尝试使 On Special 字符串与 SKU 值右对齐并在同一行 - 我尝试过使用

and and 但似乎无法使其正常工作。我不确定这是否可能，或者是否有其他方法可以解决这个问题？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

这很简单；你只需要更换，

<div class="text-right">On Special</div>

与

<div class="float-right">On Special</div>

在下面找到完整的工作代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <span class="float-right">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <span style="float: right;">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

【讨论】：

Bootstrap 4 包含一个类float-right 可以用来代替style="float: right;"
@Akash 你是对的，但是如果你调查 float-right 类后面写的内容，你会在 css style="float: right;" 中看到
你当然明白，但根据 HTML5 标准，不建议使用内联 css。虽然一些用法并没有太大的区别，但最好避免使用内联 css，因为过度使用会导致页面优化不佳。

【解决方案3】：

.text {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <div class="text">On Special</div>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

【讨论】：

【解决方案4】：

只需更改此代码即可：

<div class="text-right">On Special</div>

到此代码：

<div style="float:right;">On Special</div>

【讨论】：

【解决方案5】：

你可以从这样的事情开始。

.text-right {
display: inline;
position: absolute;
right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <div class="text-right">On Special</div>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

【讨论】：

【解决方案6】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <span class="float-right">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

【讨论】：