表中的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

您可以尝试删除表格中添加的main。或者，如果您更喜欢看起来的方式，则可以将border-spacing设置为border-collapse。

CSS中的collapse是inherited by default个子元素。 border-spacing设置为input-group，这意味着它从父表继承display: table。这意味着它将被应用于borders-spacing: 2px，因为它们被显示为表格单元格。

input-group-addon

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