Bootstrap Table 单元格在行中的位置

Question

我有一个 Bootstrap table 有 2 列，正确显示如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table class="table table-bordered">
  <tr>
    <td>Address One:</td>
    <td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
  </tr>
  <tr>
    <td>Address Two:</td>
    <td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
  </tr>
  <tr>
    <td>Suburb:</td>
    <td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
  </tr>
  <tr>
    <td>State:</td>
    <td>
      <select class="form-control shipmentState" name="shipToState" id="shipToState">
        <option value=""></option>
        <option value="ACT">ACT</option>
        <option value="NSW">NSW</option>
        <option value="NT">NT</option>
        <option value="QLD">QLD</option>
        <option value="SA">SA</option>
        <option value="TAS">TAS</option>
        <option value="VIC">VIC</option>
        <option value="WA">WA</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Postcode:</td>
    <td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
  </tr>
  <tr>
    <td>Country:</td>
    <td>
      <select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
        <option value=""></option>
        <option value="Australia">Australia</option>
        <option value="Japan">Japan</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
  </tr>
</table>

我现在想合并州和邮政编码，使它们出现在同一行，因为它们不需要很多 space，但是当我合并它们时，它们会延伸到其他行之外像这样：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table class="table table-bordered">
  <tr>
    <td>Address One:</td>
    <td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
  </tr>
  <tr>
    <td>Address Two:</td>
    <td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
  </tr>
  <tr>
    <td>Suburb:</td>
    <td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
  </tr>
  <tr>
    <td>State:</td>
    <td>
      <select class="form-control shipmentState" name="shipToState" id="shipToState">
        <option value=""></option>
        <option value="ACT">ACT</option>
        <option value="NSW">NSW</option>
        <option value="NT">NT</option>
        <option value="QLD">QLD</option>
        <option value="SA">SA</option>
        <option value="TAS">TAS</option>
        <option value="VIC">VIC</option>
        <option value="WA">WA</option>
      </select>
    </td>
    <td>Postcode:</td>
    <td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
  </tr>
  <tr>
    <td>Country:</td>
    <td>
      <select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
        <option value=""></option>
        <option value="Australia">Australia</option>
        <option value="Japan">Japan</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
  </tr>
</table>

而且我不知道如何保持原始宽度并将 state/postcode 组合成原始宽度。

Answer 1

我已经通过在每个元素中添加 colspan="2" 进行了尝试。这样每个 td 在除 State 和 Postcode 行之外的每一行中都具有 2 列的宽度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table class="table table-bordered">
  <tr>
    <td colspan="2">Address One:</td>
    <td colspan="2"><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
  </tr>
  <tr>
    <td colspan="2">Address Two:</td>
    <td colspan="2"><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
  </tr>
  <tr>
    <td colspan="2">Suburb:</td>
    <td colspan="2"><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
  </tr>
  <tr>
    <td>State:</td>
    <td>
      <select class="form-control shipmentState" name="shipToState" id="shipToState">
        <option value=""></option>
        <option value="ACT">ACT</option>
        <option value="NSW">NSW</option>
        <option value="NT">NT</option>
        <option value="QLD">QLD</option>
        <option value="SA">SA</option>
        <option value="TAS">TAS</option>
        <option value="VIC">VIC</option>
        <option value="WA">WA</option>
      </select>
    </td>
    <td>Postcode:</td>
    <td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
  </tr>
  <tr>
    <td colspan="2">Country:</td>
    <td colspan="2">
      <select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
        <option value=""></option>
        <option value="Australia">Australia</option>
        <option value="Japan">Japan</option>
      </select>
    </td>
  </tr>
  <tr>
    <td colspan="2">Phone:</td>
    <td colspan="2"><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
  </tr>
</table>

进一步使它看起来更好，您可以右对齐标签。

Bootstrap Table 单元格在行中的位置

Bootstrap Table Placement of Cells in Row

html

twitter-bootstrap-3