Question

我正在创建一个Web应用程序，并发现如果我使用fieldset然后表响应，那么页面上的水平滚动就会出现（320 * 480）的分辨率。如果我删除了fieldset，那么它工作正常。

我希望他们都在我的页面中。

我也尝试过将.table-responsive div放在一行＆gt; 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>

Answer 1

Github Issue

通过将:display:table-cell; width: 100%添加到fieldset

来解决此问题

jsFiddle Demo

CSS

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

HTML

<fieldset class="responsive-fieldset">

Answer 2

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

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

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

Answer 3

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

min-inline-size: auto;

Bootstrap 3表响应无法在移动浏览器的fieldset中工作

3 个答案: