將文字輸入對齊 <td> 在Twitter Bootstrap中正確？

Question

我試圖將“文本輸入”調整到右側，由於某種原因，它沒有這樣做。

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

Answer 1

只需使用Bootstrap pull-right ，就不需要額外的CSS ：

https://jsfiddle.net/cp1tvuj3/

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

更新的小提琴

text-right將不起作用，因為form-control為display: block

最初的問題是關於Bootstrap 3的。在Bootstrap 4中， pull-right現在是float-right 。

Answer 2

將inline-block添加到div元素中，默認情況下div是block元素，因此它占用其父元素的完整寬度

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

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

Answer 4

在td內的輸入字段周圍賦予div一種樣式

display:inline-block; 

還可以解決您的問題，而沒有浮標可能破壞其他東西。

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

Answer 5

您需要添加引導類，即。 “右拉”找到代碼小提琴：

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

Answer 6

這兩個解決方案對Bootstrap 4表很有效：

要么：

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

要么：

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