html - Bootstrap 4 表格间距

Question

如果放入表格中，输入组的元素之间存在间隙。

<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
  <div class="col-xs-4">
    <div class="input-group">
      <div class="input-group-addon">a</div>
      <div class="input-group-addon">b</div>
    </div>
  </div>
</div>

<table>
  <tr>
    <td>There is a gap between spans in tables</td>
  </tr>
  <tr>
    <td>
      <div class="input-group">
        <div class="input-group-addon">a</div>
        <div class="input-group-addon">b</div>
      </div>
    </td>
  </tr>
</table>

如何消除这个差距？

Answer 1

您可以尝试删除表格添加的border-spacing。或者，如果您喜欢这种外观，可以将 border-collapse 设置为 collapse。

边框间距是inherited by default在 CSS 中通过子元素。 input-group 设置为 display: table 这意味着它从父表继承了 borders-spacing: 2px。这意味着它将应用于 input-group-addon，因为它们显示为表格单元格。

table .input-group {
  border-spacing: 0;
}

<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
  <div class="col-xs-4">
    <div class="input-group">
      <div class="input-group-addon">a</div>
      <div class="input-group-addon">b</div>
    </div>
  </div>
</div>

<table>
  <tr>
    <td>Previously a gap between elements</td>
  </tr>
  <tr>
    <td>
      <div class="input-group">
        <div class="input-group-addon">a</div>
        <div class="input-group-addon">b</div>
      </div>
    </td>
  </tr>
</table>