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

上面的代码是不是在引导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标记。

你可以做什么来保证25％，25％是50％，其他人是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>

Answer 2

只需使用类row上<tr>标签，就像这样：

<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>

这样就可以解决问题