代码之家 › 专栏 › 技术社区 › user982124

引导4表格对齐表格单元格右上角的一些文本

bootstrap-4 css html

user982124 · 技术社区 · 7 年前

我有一个简单的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值向右对齐并在同一行上-我已经尝试使用

但似乎无法实现这一目标。我不确定这是否可能,或者是否有其他方法来解决这个问题?

6 回复 | 直到 7 年前

Akash 7 年前

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

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

××× × ×××× 7 年前

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

Nitin Bisht 7 年前

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

Irvan 7 年前

只需更改此代码:

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

对于此代码:

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

Horacio Coronel 7 年前

你可以这样开始。

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

Saw Zin Min Tun 7 年前

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