twitter-bootstrap Bootstrap 响应表没有响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20133529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Responsive Table Not Acting Responsive
提问by Mona Coder
Can you please take a look at this link (Please scroll down to the end of page )and let me know why"
1- Table is not actinf responsive?
2- I want able to control <td>widths by using col-md-3and col-lg-3does this works in table as well?
能否请您看看这个链接（请向下滚动到页面的结束），并让我知道为什么”
1表是不是actinf响应？2 -我希望能够控制<td>使用宽度col-md-3和 col-lg-3表做这个作品好？
Here is the code I have:
这是我的代码：
<div class="col-md-offset-1 col-lg-offset-1 col-md-6 col-lg-6">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<td width="174"><strong>7:30 – 8:45 a.m.</strong></td>
<td>Arrival / Health CheckFree Choice in Activity Areas, books, puzzles, matching games, large block building, small blocks, floor toys, Lego, trucks and car play.</td>
</tr>
<tr>
<td><strong>8:45 – 9:00 a.m.</strong></td>
<td>Clean-up, toileting, wash up for snack</td>
</tr>
<tr>
<td><strong>9:00 – 9:30 a.m.</strong></td>
<td>Morning snack</td>
</tr>
<tr>
<td><strong>9:30 -10:00 a.m.</strong></td>
<td>Circle Time: Action songs, singing time, finger plays, hello songs, discussion of daily activities</td>
</tr>
</tbody>
</table>
</div>
AS you can see I couldn't control the table size with col-md-3and col-lg-3so I wraped it in a div but the responsive is not working
正如你可以看到我无法控制表的大小col-md-3，并 col-lg-3让我挤包它在一个DIV，但响应不工作
回答by ceejayoz
Please re-read the docs on this feature. The table-responsiveclass needs to be on a wrapper div, not the table itself.
请重新阅读有关此功能的文档。本table-responsive类需要放在一个包装DIV，而不是表本身。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
回答by Gaurav Aggarwal
.table-responsiveshould be on wrapper div because even if you use css property overflow:scrollscrollbar will not active on table tag so we are using a wrapper div with class table-responsiveto show to scroll bar to make table responsive.
.table-responsive应该在包装 div 上，因为即使您使用 css 属性overflow:scroll滚动条也不会在表格标签上处于活动状态，因此我们使用带有类的包装 divtable-responsive来显示滚动条以使表格响应。
This is the reason we need to write responsive table code like this
这就是我们需要像这样编写响应式表格代码的原因
<div class="table-responsive">
<table class="table">
...
</table>
</div>
回答by Andrew Dant
It does work to set the table-responsiveclass on the table itself if you also set the table to display: block. It's generally better to just use the wrapper divthough.
它的工作设置table-responsive类的表本身，如果你还设置了表display: block。不过，通常只使用包装器会更好div。
回答by Nelles
I wrap all my tables with the following class. Bootstrap or otherwise and it works every time.
我用以下课程包装了我所有的桌子。Bootstrap 或其他方式，它每次都有效。
.respTable {
overflow-y: scroll;
margin: 5px;
}
