Bootstrap 4 отзывчивых стола не займет 100% ширины

Я создаю веб-приложение с помощью Bootstrap 4 и сталкиваюсь с некоторыми странными проблемами. Я хочу использовать класс Bootstrap для работы с таблицами, чтобы разрешить горизонтальную прокрутку таблиц на мобильных устройствах. На настольных устройствах таблица должна занимать 100% от ширины содержащейся DIV.Bootstrap 4 отзывчивых стола не займет 100% ширины

Как только я применил класс table-responsive к таблице, таблица сжимается горизонтально и больше не занимает 100% ширины. Есть идеи?

Вот моя разметка:

<!DOCTYPE html> 
<html lang="en" class="mdl-js"> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="application-name" content=""> 
    <meta name="theme-color" content="#000000"> 
    <link rel="stylesheet" href="/css/bundle.min.css"> 
</head> 
<body> 
    <div class="container-fluid no-padding"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <table class="table table-responsive" id="Queue"> 
        <thead> 
         <tr> 
          <th><span span="sr-only">Priority</span></th> 
          <th>Origin</th> 
          <th>Destination</th> 
          <th>Mode</th> 
          <th>Date</th> 
          <th><span span="sr-only">Action</span></th> 
         </tr> 
         </thead> 
         <tbody> 
          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d"> 
           <td>0</td> 
           <td>PHOENIX, AZ</td> 
           <td>SAN DIEGO, CA</td> 
           <td>DRIVING</td> 
           <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td> 
           <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td> 
          </tr> 
          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;"> 
           <td colspan="6" class="no-padding"></td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
      <br> 
     </div> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script type="text/javascript" src="/js/bundle.min.js"></script> 
    </body> 
</html>

Если я применяю ширину на 100% к .table реагирующего класса, это делает сам широкий 100%, но дочерние элементы таблицы (TBODY, TR, и т.д. .) все еще узкие.

источник

2017-01-19 eat-sleep-code

Следующие НЕ РАБОТАЮТ. Это вызывает еще одну проблему. Он теперь будет делать ширину 100%, но это не будет реагировать на небольших устройствах:

.table-responsive { 
    display: table; 
}

Все эти ответы представила еще одну проблему, рекомендуя display: table;.Единственным решением на данный момент является использование его в качестве обертки:

<div class="table-responsive"> 
    <table class="table"> 
... 
</table> 
</div>

источник

2017-01-19 19:26:11

Взволнованный этим навсегда - слишком рано думать об простое обертывание. Ваш человек – JSF

Использование класса «table-responsive» в качестве обертки возвращается к Bootstrap 3 ...? Рад, что есть решение на данный момент! Bootstrap 4 _Alpha_ ;-) –

Не видел эту работу с бета-версией. Похоже, вам нужно будет удалить div и добавить «table-responsive» вдоль «table». Так вот ..

– Winnemucca

По какой-то причине чувствительная таблица, в частности, не ведет себя так, как должна. Вы можете исправить это, избавившись от display:block;

.table-responsive { 
    display: table; 
}

Я могу подать отчет об ошибке.

Edit:

It is an existing bug.

источник

2017-01-19 17:27:09

Это потому, что .table-responsive класс добавляет свойство display: block к вашему элементу, который изменяет его от предыдущего display: table.

Override это свойство назад display: table в собственной таблице стилей

.table-responsive { 
    display: table; 
}

Примечание: убедитесь, что этот стиль выполняется после кода начальной загрузки для того, чтобы переопределить.

источник

2017-01-19 17:31:22

Это вызвано table-responsive класса давая таблицу свойство display:block, что странно, потому что это переписывает table классы оригинальных display:table и поэтому таблица сжимается при добавлении table-responsive.

Скорее всего, это до бутстрапа 4, все еще находящегося в dev. Вы можете перезаписать это свойство своим собственным классом, который устанавливает display:table, и это не повлияет на отзывчивость таблицы.

например.

.table-responsive-fix{ 
    display:table; 
}

источник

2017-01-19 17:31:22 Callum

Принимая во внимание другие ответы, я бы сделал что-то вроде этого, спасибо!

.table-responsive { 
    @include media-breakpoint-up(md) { 
     display: table; 
    } 
}

источник

2017-07-05 01:29:15 Alexis

следующее решение работает для меня:

Добавить новый класс таблицы или изменить ваш стол класса
Набор дисплей: таблица в контрольной точке, чтобы развернуть таблицу

.your-class { @include media-breakpoint-up (md) { дисплей: стол; } }

Добавить дисплей: унаследовать на мобильный, если вам нужно

источник

2017-08-16 09:23:58 soulglider

Это решение работает для меня:

просто добавить еще один класс в свой элемент таблицы: w-100 d-block d-md-table

так было бы: <table class="table table-responsive w-100 d-block d-md-table">

для начальной загрузки 4 w-100 установить ширину до 100% d-block (дисплей: блок) и d-md-table (дисплей: стол по мин-ширина: 576px)

Bootstrap 4 display docs

источник

2017-09-07 10:08:45 Faytraneozter

Работает на Bootstrap4 Beta! Ключ был w-100. Спасибо. – ObjectiveTC

Решение совместимо с v4 рамок - установить правильную точку останова. Вместо использования .table-responsive, вы должны иметь возможность использовать .table-responsive-sm (чтобы просто реагировать на небольшие устройства)

Вы можете использовать любую из доступных конечных точек: table-responsive {-sm | -md | -lg | -xl}

источник

2017-10-31 15:27:01

Bootstrap 4 отзывчивых стола не займет 100% ширины

ответ

Смежные вопросы