在 twitter bootstrap 中将 <td> 中的文本输入对齐？答案

【问题标题】：Align text input in <td> to right in twitter bootstrap?在 twitter bootstrap 中将 <td> 中的文本输入对齐？
【发布时间】：2017-08-16 01:01:22
【问题描述】：

我正在尝试将文本输入向右对齐，但由于某种原因它没有这样做。

我在<td>中使用过style="text-align: right"

查看示例：

https://jsfiddle.net/DTcHh/31200/

代码

<table class="table">
  <thead>
    <tr>
      <th>Field 1</th>
      <th style="text-align:right">Field 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>

      <td style="text-align: right">
        <div class="form-group" style="text-align: right">
          <input style="width:60px" type="number" class="form-control" value="test">
        </div>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

你想让'Text 1'向右对齐吗？还是''？
stackoverflow.com/questions/18086468/…的可能重复
align text to right in td tag的可能重复

标签： html css twitter-bootstrap twitter-bootstrap-3 html-table

【解决方案1】：

不需要额外的 CSS 只需使用 Bootstrap pull-right:

https://jsfiddle.net/cp1tvuj3/

<div class="form-group">
          <input style="width:60px" type="number" class="form-control pull-right" value="test">
</div>

Updated fiddle

text-right 不起作用，因为 form-control 是 display: block

最初的问题是针对 Bootstrap 3。在 Bootstrap 4 中，pull-right is now float-right。

【讨论】：

pull-right 已在 Bootstrap 4 getbootstrap.com/docs/4.0/migration/#utilities 中替换为 float-right。

【解决方案2】：

将 inline-block 添加到您的 div 元素，默认情况下 div 是块元素，因此它占用其父元素的完整宽度

 <div class="form-group" style="text-align: right;display:inline-block;">
          <input style="width:60px" type="number" class="form-control" value="test">
 </div>

https://jsfiddle.net/RACCH/y9fvo4dj/

【讨论】：

【解决方案3】：

似乎只需添加float: right; 就可以了，请参阅

url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Field 1</th>
      <th style="text-align:right">Field 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>      
      <td style="text-align: right">
        <div class="form-group" style="text-align: right; float:right">
          <input style="width:60px" type="number" class="form-control" value="test">
        </div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案4】：

在你的 td 中为输入字段周围的 div 赋予一种风格

display:inline-block;

还可以解决您的问题，而不会有任何可能破坏其他东西的浮动。

https://jsfiddle.net/DTcHh/31202/

【讨论】：

【解决方案5】：

您需要添加引导类，即。 “向右拉” 找到代码小提琴：

    `https://jsfiddle.net/DTcHh/31204/e`

【讨论】：

【解决方案6】：

这两个解决方案适用于我的 Bootstrap 4 表：

要么：

<td>
    <div class="float-right">
        <input>
    </div>
</td>

或者：

<td class="text-right">
    <div class="d-inline-flex">
        <input>
    </div>
</td>

【讨论】：