本文介绍了Bootstrap 3 表响应在移动浏览器的字段集中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个 Web 应用程序，发现如果我使用字段集，然后使用表格响应，那么页面上会出现水平滚动条，分辨率为 (320*480).如果我删除了 fieldset 那么它工作正常.
我希望它们都出现在我的页面中.
我也尝试将 .table-responsive div 放在一行中 > col-xs-12 但它并没有帮助相同的水平滚动.
<legend>测试员</legend><div class="table-responsive"><table class="table"><头><tr><th>#</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tr><td>1</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></fieldset>
解决方案 通过添加 :display:table-cell; 修复它宽度:100% 到字段集
CSS
.responsive-fieldset {display:table-cell;宽度:100%}
HTML
I am creating an web app and found that if I used fieldset and then table responsive then a horizontal scroll comes on page on resolution of (320*480). If I removed fieldset then it worked fine .
I want both of them in my page.
I also tried by putting .table-responsive div in a row > col-xs-12 but it doesn't help same horizontal scroll comes.
<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>
解决方案 Fix it by adding :display:table-cell; width: 100% to fieldset
CSS
.responsive-fieldset {display:table-cell; width: 100%}
HTML
<fieldset class="responsive-fieldset">
这篇关于Bootstrap 3 表响应在移动浏览器的字段集中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-26 06:09