Question

我有一个简单的Bootstrap 4表，有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
      <div class="text-right">On Special</div>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

我正在尝试让On Special字符串与SKU值在右边和同一行对齐 - 我尝试过玩

而且可以'似乎让这个工作。我不确定这是否可行，或者是否有另一种解决方法？

Answer 1

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

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

与

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

查找下面的完整工作代码：

＆＃13;

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

＆＃13;

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

Answer 3

＆＃13;

.text {
  float: right;
}

＆＃13;

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

＆＃13;

Answer 4

只需更改此代码：

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

到此代码：

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

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Bootstrap 4表格对齐表格单元格右上角的某些文本

6 个答案: