如何在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

您将无法对 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>