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 我在他们的问题跟踪器中找到了一些相关的讨论：

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

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

Answer 1

只需使用row标记上的课程<tr>，就像这样：

＆＃13;

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

＆＃13;

这应解决问题

Answer 2

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

你可以做些什么来保证50％中的25％，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>

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

2 个答案: