Bootstrap 4响应表不会占用100％宽度

我正在使用Bootstrap 4构建一个Web应用程序，并遇到一些奇怪的问题。我想利用Bootstrap的表格响应式类来允许在移动设备上水平滚动表格。在桌面设备上，表格应该占用包含DIV宽度的100％。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％的宽度的。表响应类，它使表本身宽度为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”中添加“table-responsive”。像这样..

– Winnemucca

由于某些原因，响应表特别是表现不如其应该。您可以通过摆脱display:block;

.table-responsive { 
    display: table; 
}

我可以提交错误报告。

编辑：

It is an existing bug.

来源

2017-01-19 17:27:09

这是因为.table-responsive类添加属性display: block你的元素从以前display: table改变它。

覆盖此属性回到display: table在自己的样式表

.table-responsive { 
    display: table; 
}

注：要确保这种风格的引导代码后执行它覆盖。

来源

2017-01-19 17:31:22

它是由table-responsive类给表的display:block的属性，这很奇怪，因为这将覆盖table类原display:table，这就是为什么当你添加table-responsive表收缩引起的。

最有可能的是自举4仍在开发中。您可以使用您自己的类设置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

以下解决方案为我工作：

添加新的类表或修改表类
设置显示：表断点内扩大表

包括媒体断点向上（md）{display：table; } }

添加显示：继承移动，如果你需要

来源

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％宽度

回答

相关问题