Bootstrap 3表格金额与对应标签对齐及移动端适配问题咨询

你的核心问题在于现有表格结构无法让不同单元格内的多行内容一一垂直对齐——第一列的Pay total和Extra被塞进了同一个<td>，而其他列的金额是各自独立的<p>，表格的行（<tr>）是整体高度，内部元素没有行级的对应关系，自然没法精准对齐，尤其是在移动端堆叠后问题更明显。

结论：必须调整结构 #

现有结构很难实现你要的对齐效果，最可靠的方式是把每个贷款的信息拆成两行表格行：一行对应Pay total，一行对应Extra，让每一行的单元格内容严格对应，这样无论是桌面端还是移动端，都能保证标签和金额精准对齐。

修改后的代码示例 #

HTML 结构调整

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="table-responsive"> <!-- 加这个让移动端表格可滚动 -->
    <table>
      <thead>
        <th>Testing 0</th>
        <th>
          <input type="radio" name="allocation" value="highestInterestRate">
          <br> Testing <br> 1
        </th>
        <th>
          <input type="radio" name="allocation" value="highestCurrentBalance">
          <br> Testing <br> # <br> 2
        </th>
        <th>
          <input type="radio" name="allocation" value="lowestCurrentBalance">
          <br> Testing <br> 3
        </th>
        <th>
          <input type="radio" name="allocation" value="prorate">
          <br> Testing <br> # <br> # <br> 4
        </th>
        <th>
          <input type="radio" name="allocation" value="unsubsidizedLoans">
          <br> Testing <br> 5
        </th>
      </thead>
      <tbody>
        <!-- 贷款1：Pay total 行 -->
        <tr>
          <td>
            <div class="row">
              <div class="col-xs-12 col-md-7">
                <p class="payment-loan-name"><strong>#1</strong> Hello this is name 1</p>
                <p>Current Balance $ 2,000.00</p>
                <p>Interest Rate 1.99%</p>
              </div>
              <div class="col-xs-12 col-md-5">
                <p>Pay total</p>
              </div>
            </div>
          </td>
          <td>$ 200.00</td>
          <td>$ 200.00</td>
          <td>$ 200.00</td>
          <td>$ 200.00</td>
          <td>$ 200.00</td>
        </tr>
        <!-- 贷款1：Extra 行 -->
        <tr>
          <td>
            <div class="row">
              <div class="col-xs-12 col-md-5 col-md-offset-7"> <!-- 偏移到和Pay total同一位置 -->
                <p>Extra</p>
              </div>
            </div>
          </td>
          <td></td> <!-- 没有Extra的列留空 -->
          <td>$ 100.00</td>
          <td></td>
          <td>$ 33.33</td>
          <td>$ 50.00</td>
        </tr>

        <!-- 贷款2：Pay total 行 -->
        <tr>
          <td>
            <div class="row">
              <div class="col-xs-12 col-md-7">
                <p class="payment-loan-name"><strong>#2</strong> Hello this is name 2 and this is going to be in two lines</p>
                <p>Current Balance $ 2,000.00</p>
                <p>Interest Rate 1.99%</p>
              </div>
              <div class="col-xs-12 col-md-5">
                <p>Pay total</p>
              </div>
            </div>
          </td>
          <td>$ 100.00</td>
          <td>$ 100.00</td>
          <td>$ 100.00</td>
          <td>$ 100.00</td>
          <td>$ 300.00</td>
        </tr>
        <!-- 贷款2：Extra 行 -->
        <tr>
          <td>
            <div class="row">
              <div class="col-xs-12 col-md-5 col-md-offset-7">
                <p>Extra</p>
              </div>
            </div>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td>$ 50.00</td>
          <td>$ 50.00</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS 优化

td, th { 
  border: solid; 
  vertical-align: middle !important; /* 强制单元格内容垂直居中 */
}
table { 
  table-layout: fixed; 
  width: 100%; 
}
th:nth-child(1) { width: 31%; }
th:nth-child(2), th:nth-child(3), th:nth-child(4), th:nth-child(5), th:nth-child(6) { width: 10%; }

/* 移动端让Extra标签和Pay total标签堆叠后对齐 */
@media (max-width: 767px) {
  .col-md-offset-7 {
    margin-left: 0;
  }
}

关键说明 #

1. 拆分表格行：把每个贷款的Pay total和Extra拆成独立的<tr>，确保每一行的单元格内容一一对应，从根本上解决对齐问题。
2. Bootstrap 响应式处理：在移动端用col-md-offset-7的媒体查询重置偏移，让Extra标签堆叠在贷款信息下方，和金额保持对应。
3. 垂直居中：给单元格加vertical-align: middle，确保内容在单元格内垂直居中，进一步优化对齐效果。

这样调整后，无论是桌面端还是移动端，Pay total/Extra标签都能和对应列的美元金额精准对齐，完全符合你的需求。

内容的提问来源于stack exchange，提问作者BeastMaster