如何在Bootstrap v4中为表格指定响应列宽度 [英] How to specify responsive column width for table in Bootstrap v4

问题描述

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

In Bootstrap 3, I can easily design responsive sensitive table. I can split columns into their grid system. More than that I can hide some column for small devices. Here is my example. The table has 13 columns. The first two columns have 25% width each, the rest columns will share the rest 50% width.

<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中不起作用.您可以看到预期的列宽不是.我检查了他们的发行说明，但没有提及表布局的任何重大更改.

Above code is not working in Bootstrap 4. You can see the column widths are not expected. I checked their release notes, it does not mention any breaking change of table layout.

<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无法指定响应列的宽度.任何提示都将受到高度赞赏.

Now if I add style="width:25%" for the first two columns, it will work. Now I want to figure out, whether my usage is wrong, or Bootstrap 4 is not possible to specify responsive column width. Any hints are highly appreciated.

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

Update #1 Regarding @CamiloTerevinto 's suggestion, col-xs-* is now renamed to col-*.

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

Update #2 I found some related discussions in their issue tracker:

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

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

为此的临时解决方法是设置<tr class="row">，然后将其余列设置为col-1.但是正如作者提到的那样，您必须在td中设置相同的类，这不是很实际.

A temporary workaround for this is to set the <tr class="row"> and then set the rest columns with col-1. But as the author mentioned that you have to set the same classes in td which is not very practical.

推荐答案

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

Just use the class row on the <tr> tag, like this:

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

这应该可以解决问题

这篇关于如何在Bootstrap v4中为表格指定响应列宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！