css - Bootstrap - 表格内输入标签的宽度和对齐方式错误

Question

我将输入标签放在表格中，我发现很难控制单元格的宽度和输入的对齐方式。

这是我的代码片段:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" method="post" action="./">
      <table class="table table-hover table-bordered table-striped">
        <thead>
          <tr>
            <th class="col-md-1">ID</th>
            <th class="col-md-3">Column A</th>
            <th class="col-md-1">Column B</th>
            <th class="col-md-1">Column C</th>
            <th class="col-md-3">Column D</th>
            <th class="col-md-3">Correction</th>
          </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>A1</td>
          <td class="text-right">B1</td>
          <td class="text-right">C1</td>
          <td class="text-right">90</td>
          <td><input type="number" name="correction1" class="col-md-5 text-right"></td>
        </tr>
        <tr>
          <td>2</td>
          <td>A2</td>
          <td class="text-right">B2</td>
          <td class="text-right">C2</td>
          <td class="text-right">50</td>
          <td><input type="number" name="correction2" class="col-md-5 text-right"></td>
        </tr>
        </tbody>
      </table>
    </form>

我希望输入标签的单元格(列名称“Correction”)与 D 列具有相同的宽度。并且还与输入标签右对齐。

Answer 1

您所要做的就是分配一些宽度并将 input float 到右侧。像您尝试的那样使用列类或文本对齐是行不通的。

.float-right{float: right;}
table input{width: 50%;}
table td{width: 10%;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" method="post" action="./">
      <table class="table table-hover table-bordered table-striped">
        <thead>
          <tr>
            <th class="col-md-1">ID</th>
            <th class="col-md-3">Column A</th>
            <th class="col-md-1">Column B</th>
            <th class="col-md-1">Column C</th>
            <th class="col-md-3">Column D</th>
            <th class="col-md-3">Correction</th>
          </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>A1</td>
          <td class="text-right">B1</td>
          <td class="text-right">C1</td>
          <td class="text-right">90</td>
          <td><input type="number" name="correction1" class="float-right"></td>
        </tr>
        <tr>
          <td>2</td>
          <td>A2</td>
          <td class="text-right">B2</td>
          <td class="text-right">C2</td>
          <td class="text-right">50</td>
          <td><input type="number" name="correction2" class="float-right"></td>
        </tr>
        </tbody>
      </table>
    </form>