如何让表格尊重 Bootstrap 3 中的网格？

Question

Bootstrap table 不遵守网格，即使它们定义了 col-xs-X 类。

这是一个最小的示例，显示了（红色）table 如何与（灰色）网格不对齐：http://jsfiddle.net/fm65v3e0/

.col-xs-1 {
  background-color: #eee;
  border: 1px solid #999;
}

th {
  background-color: #fee;
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="table-responsive">
        <table class="table">
          <tr>
             <th class="col-xs-5">
               5-col header
             </th>
             <th class="col-xs-3">
               3-col header
             </th>
             <th class="col-xs-4">
               4-col header
             </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

因为 table 出现在列中，所以它在外部有一定数量的填充。如果我从列中删除填充 table 行，但当然现在列中的任何文本都将与下一列齐平。

此外，Bootstrap table 默认为 100% 宽度，如果您不使用所有 12 列，则分配任何 "spare" space。

我的网站几乎完全是表格数据，所以如果我的 table 没有尊重网格，那就有点像我根本没有使用网格。你觉得我能轻易解决这个问题吗？尝试解决这个问题 it/care 是错误的吗？

Answer 1

您的 bootstrap CSS 将 padding-right: 15px 和 padding-left: 15px 添加到所有 col-xx-xx 元素。

移除或覆盖内边距，一切应该正确对齐。下图显示了删除填充后 Bootply 中发生的情况。

覆盖它的一种方法是创建一个名为 no-padding 的 class，如下所示：

.no-padding {
     padding-left: 0;
     padding-right: 0;
}

并将其应用于您不想应用填充的任何元素。这是一个更新的演示：

.col-xs-1 {
  background-color: #eee;
  border: 1px solid #999;
}

th {
  background-color: #fee;
  border: 1px solid red;
}
.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-12 no-padding"> <!-- Add it Here -->
      <div class="table-responsive">
        <table class="table">
          <tr>
             <th class="col-xs-5">
               5-col header
             </th>
             <th class="col-xs-3">
               3-col header
             </th>
             <th class="col-xs-4">
               4-col header
             </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

如何让表格尊重 Bootstrap 3 中的网格？

How can I make tables respect the grid in Bootstrap 3?

css

grid-layout

responsive-design

twitter-bootstrap

twitter-bootstrap-3