Как указать отзывчивую ширину столбца для таблицы в Bootstrap v4

В 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, что не очень практично.


css twitter-bootstrap bootstrap-4 responsiveness
person stanleyxu2005    schedule 24.08.2016    source источник
comment
Так же, как FYI: col-xs-* был удален (больше не существует в Bootstrap 4), вместо этого вы должны использовать col-*   -  person Camilo Terevinto    schedule 26.05.2017
comment
Есть новости по этому поводу?   -  person SrAxi    schedule 31.08.2017

Ответы (2)


arrow_upward
1
arrow_downward

Просто используйте класс 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>

это должно решить проблему

person Xico Eusébio    schedule 06.10.2017

arrow_upward
-1
arrow_downward

Вы не сможете использовать разметку Bootstrap для сетки из 13 столбцов.

Что вы можете сделать, чтобы гарантировать, что 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>

person Adam    schedule 24.08.2016
comment
@ stanleyxu2005 это потому, что этот ответ совершенно недействителен. DIV недействителен внутри TR - person Camilo Terevinto; 25.05.2017