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

Question

我正在使用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分辨率屏幕上最大化时也是如此.

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

Answer 1

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

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