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

回答

相關問題