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

96

我正在使用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等）仍然很窄。

css  bootstrap-4 
— 吃代码
source

Answers:

158

以下将不起作用。它导致另一个问题。现在它将执行100％的宽度，但在较小的设备上将不会响应：

.table-responsive {
    display: table;
}

所有这些答案都通过推荐引入了另一个问题display: table;。到目前为止，唯一的解决方案是将其用作包装器：

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
— 约翰·法伯（John FatBoy）Doeeee Rolla
source
2
永远对此感到烦恼-还为时过早，无法考虑将其包装。您的男人
— JSF
将table-responsive类用作包装器可以追溯到Bootstrap 3 ...？很高兴目前有解决方案！Bootstrap 4 Alpha ;-)
— 史蒂夫·迈斯纳
没有看到此功能与Beta。看起来您将需要删除div并在“ table”上添加“ table-sensitive”。像这样.. <table class =“ table table-
— sensitive
在引导程序4中仍未解决此问题，尽管其中一部分与您的回答相同，但从引导程序3到4的迁移说明指出：“响应表不再需要包装元素。相反，只需将.table-response就在<table>上。” ...在这里找到：getbootstrap.com/docs/4.0/migration/#tables
— Marin
在4.3.1版上非常适合我！谢谢
— Ibrahim Isa
38

此解决方案为我工作：

只需将另一个类添加到表元素中： 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显示文档

— Faytraneozter
source
2
适用于Bootstrap4 Beta！关键是w-100。谢谢。
— ObjectiveTC
这种解决方案的效果与只是做的效果不同<table class="table table-responsive-md">吗？
— JamesWilson
20

如果您使用的是V4.1，并且根据他们的文档，请不要直接将.table-response分配给表。该表应该是.table，如果您希望它可以水平滚动（响应），请将其添加到.table响应容器（<div>例如a）中。

响应式表允许轻松地水平滚动表。通过将.table包装为.table-response，使所有表在所有视口中具有响应能力。

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

这样做，不需要额外的CSS。

在OP的代码中，.table-sensitive可以与外部的.col-md-12一起使用。

— 马塞洛·米亚拉（Marcelo Myara）
source
3
自从引导程序的稳定版本以来，这应该是正确的答案。Thx
— 彼得
2
这就是答案。谢谢
— Gjaa
1
正确答案！
— 安德鲁·舒尔茨
5

这些答案均无效（日期为2018年12月9日）。正确的解决方法是在表中添加.table-sensitive-sm：

<table class='table table-responsive-sm'>
[Your table]
</table>

这仅将响应性方面应用于SM视图（移动设备）。因此，在移动视图中，您可以根据需要进行滚动；在较大视图中，表格没有响应，因此可以按需要显示全宽。

文件：https：//getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

— 歌盒
source
2

符合框架v4的解决方案是设置适当的断点。而不是使用.table-sensitive，您应该能够使用.table-sensitive-sm（仅在小型设备上响应）

您可以使用任何可用的端点：响应表{-sm | -md | -lg | -xl}

— 鲁本
source
1

这是因为.table-responsive该类将属性添加display: block到您的元素，从而将其与上一个元素进行了更改display: table。

将此属性改写回到display: table您自己的样式表中

.table-responsive {
    display: table;
}

注意：请确保此样式在您的引导代码之后执行，以覆盖它。

— 尼基尔·南贾帕（Nikhil Nanjappa）
source
1

这是由table-responsive类赋予表的属性引起的display:block，这很奇怪，因为这会覆盖table原始类display:table，这就是为什么当添加时表会缩小table-responsive。

最有可能导致启动4的问题仍在开发中。您可以使用自己设置的类覆盖此属性，display:table并且不会影响表的响应能力。

例如

.table-responsive-fix{
   display:table;
}
— 卡勒姆
source
1

考虑到其他答案，我会做这样的事情，谢谢！

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
— 亚历克西斯
source
1

通过用.table-sensitive {-sm | -md | -lg | -xl}包装任何.table来创建响应表，使该表在每个最大宽度断点处（最多（但不包括）576px，768px，分别为992px和1120px。

只需使用.table-sensitive {-sm | -md | -lg | -xl}包装表格

例如 

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

引导4表

— iMezied
source
0

我发现在包装器中使用推荐的表响应类仍然会导致响应表水平（令人惊讶地）水平缩小：

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

对我来说，解决方案是创建以下媒体断点和类以防止出现这种情况：

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

然后，我可以将适当的类添加到表元素中。例如：

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

在这里，包装程序将宽度设置为100％，以使每个Bootstrap越来越大。将table-lg类应用于table元素后，对于较大的表格和更大的表格，宽度也设置为100％，对于中的较小的图片，宽度设置为992px。table-xs，table-sm，table-md和table-xl类的工作方式相同。

— 斯科蒂
source
0

对于Bootstrap 4.x，请使用显示实用程序：

w-100 d-print-block d-print-table

用法：

<table class="table w-100 d-print-block d-print-table">
— 宝来
source
0

似乎“ sr-only”元素及其在表中的样式是导致此错误的原因。至少我遇到了同样的问题，经过几个月的努力，我们才确定了原因，尽管我仍然不明白为什么。添加left:0到“仅sr”样式中修复了该问题。

— 布莱恩·纽厄尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.