Bootstrap 4响应表不会占用100％的宽度
我正在使用Bootstrap
4构建Web应用程序，并遇到一些奇怪的问题。我想利用Bootstrap的表响应类来允许在移动设备上水平滚动表。在台式设备上，桌子应占据所含DIV宽度的100％。
一旦将.table-response类应用于表，表就会水平缩小，并且不再占用宽度的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-response类，它将使表本身变为100％的宽度，但是子元素（TBODY，TR等）仍然很窄。
问题答案：
以下将不起作用。它导致另一个问题。现在它将执行100％的宽度，但在较小的设备上将不会响应：
.table-responsive {
display: table;
}
所有这些答案都通过推荐引入了另一个问题display: table;。到目前为止，唯一的解决方案是将其用作包装器：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
-
问题内容： 当我有一个with时，它并不是100％： 现在，当您调整窗口大小时，会有一个水平滚动条，然后向右滚动，则背景消失了。在这种情况下如何保持背景？ 现在，当您调整窗口大小并向右滚动时，您将不再看到背景。如何解决这个问题？ 问题答案： 100％值是父级宽度或视口的100％。请参阅文档。
-
Java(TM)SE运行时环境（构建1.7.0_40-B43) Java HotSpot(TM)64位服务器VM（构建24.0-b56，混合模式 我们有相同技术的其他应用程序，但没有问题。 -xms1g-xmx1g-xx:+heapdumponoutofmemoryerror-xx:+useparngc-xx:+useconcmarksweepgc-xx:+printgcdetails-xx:+p
-
我做了一个表头和列固定的表。但这里我已经指定了我不想要的头/体的宽度。我用引导类col-md-6(50%宽度）将整个表放在一个div中。但是除非我为thead和tbody硬编码样式，否则它是不起作用的。我希望thead和tbody取父div的宽度。但如果没有指定像素或百分比,则会占用屏幕的全宽。这是我的代码 null null 所有我想要的是使表的响应，而不是像静态400px或50%或类似的东西。
-
我试图调整反应日期选择器输入框的宽度，但令人惊讶的是，我发现几乎没有信息，无法影响其宽度。我只想使输入宽度100%包含div。 宽度应扩展到其父容器的宽度。 以下操作将导致与父的宽度相同，但宽度保持不变。 最接近的尝试是这样的，但是它也会影响弹出窗口的宽度，导致它延伸到整个屏幕的长度之外，所以这也不是一个解决方案： 日期选择器保持相同的长度，除非为宽度设置了特定的px值。 有人知道如何将react
-
我试图用制作一个响应线图。 我用这个MWE重现了我的尝试： 如果我让浏览器更宽，线条图会像你期望的那样响应，填满空间。 我的问题是，如果我使浏览器变窄，图形不会像我使其变宽时那样调整大小以填充浏览器宽度的100%。对于新的浏览器宽度来说，它仍然太宽。有趣的是，在刷新时，图形总是占据浏览器的100%。 把浏览器做宽做窄，如何让图占据浏览器的100%？
-
CSS background-size：contain不占全部宽度。它确实适当地覆盖了所有高度，但在屏幕右侧留下了一个非常大的（500 px或更宽）白色部分。我试过任何办法，但都不能使它奏效。我留下了一个简单的代码，我去掉了所有不必要的部分。到目前为止，我已经尝试了Chrome和Firefox，得到了相同的输出。我想使用background-size：contain，因为当窗口大小变小时，它会重新