Bootstrap输入组将表推送到Internet Explorer中超出屏幕宽度的位置

时间:2018-07-20 14:09:57

标签: bootstrap-4 internet-explorer-11

我正在使用Bootstrap构建网站,并且为了一致地设置字段样式和指示输入单位,我大量使用了输入组。有一次,我不得不在表格中创建一个编辑表单。我考虑过将其放在Bootstrap网格中,但是由于数据本身实际上是表格格式的,因此我将其设置为table

<table class="table table-hover">
            <thead>
                <tr>
                    <th style="width: 32px;"></th>
                    <th style="width: 7em;"></th>
                    <th style="width: 7em;">Test 1</th>
                    <th style="width: 10em;">Test 2 </th>
                    <th style="width: auto;">Test 3</th>
                    <th style="width: 10em;">Test 4
                    <th style="width: auto;">Test 5 </th>
                    <th style="width: auto;">Alternative 1</th>
                    <th style="width: 10em;">Probability 1</th>
                    <th style="width: auto;">Alternative 2</th>
                    <th style="width: 10em;">Probability 2</th>
                </tr>
            </thead>
            <tbody>
            <tr  class="shareEditor">
                <input  type="hidden" value="1" />
                <input  type="hidden" value="7" />
                <input  type="hidden" value="0" />
                <input  type="hidden" value="2" />
                <td>
                </td>
                 <td>Test</td>
                <td>
            <input  type="hidden" value="True" /><input  type="hidden" value="1" />Test</td>
    <td><input class="form-control"  type="text" value="" /></td>
    <td>
        <div class="input-group">
            <input value="0" class="form-control" />
            <div class="input-group-append input-group-text">m3</div>
        </div>
    </td>
    <!-- Omitted -->
    </tr>            
  </tbody>
  </table>

这在Chrome和Edge中可以正常工作:输入字段会按比例调整其宽度,以使表格适合页面的宽度(只要可行)。请参见此JSBin:http://jsbin.com/sozetategi,然后尝试调整屏幕大小。

但是Internet Explorer 11希望使输入组具有固定的宽度,将列推到th中指定的宽度之外,并使表格水平滚动,即使在我的1900x1200分辨率的屏幕上最大化也是如此。

Chrome - expected behaviour - all columns are visible even on non-maximized window

Internet Explorer 11 - inputs are forced to a certain width so not all columns are visible and page scrolls horizontally

这是Bootstrap中的错误,还是我需要一些替代类来使IE在此处正常运行?

2 个答案:

答案 0 :(得分:0)

.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control {
width: 1vw;
max-width: 1vw;
}

在您的样式表中添加上述CSS并自定义vw。这会起作用。

答案 1 :(得分:0)

这实际上是默认的table行为。他们是响应式网页设计的痛点。一种解决方案是像这样使用Responsive Bootstrap Tables

<table class="table table-responsive">

这是您的具有可调整大小的表的工作JS Bin:https://jsbin.com/ginuditoke/1/edit?html,output