Bootstrap 4 个表格间距

Question

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

<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

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

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

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>

Bootstrap 4 个表格间距

Bootstrap 4 spacing in tables

html

css

html-table

twitter-bootstrap

bootstrap-4