Bootstrap 3 表响应在移动浏览器的字段集中不起作用答案

【问题标题】：Bootstrap 3 table-responsive not working within fieldset in mobile browserBootstrap 3 表响应在移动浏览器的字段集中不起作用
【发布时间】：2021-03-26 18:17:04
【问题描述】：

我正在创建一个 Web 应用程序，发现如果我使用字段集，然后使用表格响应，则页面上会出现水平滚动，分辨率为 (320*480)。如果我删除了字段集，那么它工作正常。

我希望它们都出现在我的页面中。

我也尝试将 .table-responsive div 放在一行中 > col-xs-12 但它无助于相同的水平滚动。

<fieldset>
    <legend>Tester</legend>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
</fieldset>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 mobile-browser

【解决方案1】：

Github Issue

通过将:display:table-cell; width: 100% 添加到字段集来修复它

jsFiddle Demo

CSS

.responsive-fieldset {display:table-cell; width: 100%}

HTML

<fieldset class="responsive-fieldset">

【讨论】：

【解决方案2】：

事实证明，当视口宽度未设置为设备宽度时，此问题可能会出现在移动浏览器上。在你的<head> 中添加这个元素，它至少会对 Chrome 有所帮助。

<meta name="viewport" content="width=device-width">

请参阅@bootstrapthemer 的答案，让移动 Mozilla 以我们习惯的方式处理字段集宽度。 Mozilla 知道这个错误并more info from Mozilla can be found here。

【讨论】：

嗨@jeremy。感谢您的回复。但是我更新了代码库并再次在mozilla中尝试了相同的分辨率问题仍然存在
这仅在 Mozilla 中吗？什么设备？
mozilla 中的分辨率 320 * 480 我正在测试它。使用 ctrl+shift+M 响应式测试功能。
我已更新我的答案以反映此消息，并且缺少的 </tr> 标签不是问题的根源。
好的，我的回答将有助于涵盖更多浏览器，但@bootstrapthemer 的回答是 Mozilla 所需要的。

【解决方案3】：

只需在字段集中添加此样式

min-inline-size: auto;

【讨论】：

这可能是一个更好的答案，但你应该解释为什么......