如何在 Bootstrap v4 中为表格指定响应列宽

Question

在 Bootstrap 3 中，我可以轻松设计响应式敏感表。我可以将列拆分为它们的网格系统。不仅如此，我还可以为小型设备隐藏一些列。这是我的例子。该表有 13 列。前两列各有 25% 的宽度，其余列将共享其余 50% 的宽度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr>
  <td class="col-xs-3">1</td>
  <td class="col-xs-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

以上代码在 Bootstrap 4 中不起作用。您可以看到列宽不是预期的。我查看了他们的发行说明，它没有提到表格布局的任何重大变化。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr>
  <td class="col-3">1</td>
  <td class="col-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

现在，如果我为前两列添加style="width:25%"，它将起作用。现在我想弄清楚，是我的用法错误，还是 Bootstrap 4 无法指定响应式列宽。任何提示都非常感谢。

更新 #1 关于@CamiloTerevinto 的建议，col-xs-* 现在更名为col-*。

更新 #2 我在他们的问题跟踪器中找到了一些相关的讨论：

1. https://github.com/twbs/bootstrap/issues/21547
2. https://github.com/twbs/bootstrap/issues/21913

对此的临时解决方法是设置<tr class="row">，然后使用col-1 设置其余列。但是正如作者提到的，你必须在td中设置相同的类，这不是很实用。

Answer 1

只需在<tr> 标签上使用row 类，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr class="row">
  <td class="col-md-3">1</td>
  <td class="col-md-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

这应该可以解决问题

Answer 2

您将无法对 13 列网格使用 Bootstrap 标记。

您可以做些什么来保证 50% 中的 25%、25% 和其他 50% 是设置在更大的 div 中，如下所示。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
  <div class="col-xs-6">
      <td class="col-xs-3">COL 1</td>
      <td class="col-xs-3">COL 2</td>
  </div>
  <div class="col-xs-6">
      <div class="col-xs-2">
        <td>COL 3</td>
        <td>COL 4</td>
        <td>COL 5</td>
        <td>COL 6</td>
      </div>
      <div class="col-xs-2">
        <td>COL 7</td>
        <td>COL 8</td>
        <td>COL 9</td>
        <td>COL 10</td>
      </div>
      <div class="col-xs-2">
        <td>COL 11</td>
        <td>COL 12</td>
        <td>COL 13</td>
     </div>
  </div>
</tr>
</table>