我正在使用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在此处正常运行?
答案 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