Bootstrap响应表不响应

zour9fqk 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(4)|浏览(129)

我正在编写下面的代码，并试图找出：
1.为什么table没有React
1.我希望能够控制<td>宽度使用col-md-3和col-lg-3;这个也能用在table上吗？
下面是我的代码：

<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>

正如你所看到的，我不能用col-md-3和col-lg-3控制表的大小，所以我把它 Package 在一个div中，但是响应性不起作用。

twitter-bootstrap

来源：https://stackoverflow.com/questions/20133529/bootstrap-responsive-table-not-acting-responsively

4条答案

按热度按时间

gkn4icbw1#

请重新阅读有关此功能的文档。table-responsive类需要位于 Package 器div上，而不是表本身。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

赞(0）回复(0）举报 2023-09-28

xxb16uws2#

.table-responsive应该在 Package 器div上，因为即使你使用css属性overflow:scroll scrollbar也不会在table标签上激活，所以我们使用了一个 Package 器div和类table-responsive来显示滚动条，以使table响应。
这就是为什么我们需要像这样编写响应式表代码的原因

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

赞(0）回复(0）举报 2023-09-28

q3qa4bjr3#

如果您还将表设置为display: block，则在表本身上设置table-responsive类确实有效。不过，通常最好只使用 Package 器div。

赞(0）回复(0）举报 2023-09-28

sqougxex4#

我用下面的类 Package 所有的表。Bootstrap或其他方式，它的工作每一次。

.respTable {
   overflow-y: scroll;
   margin: 5px;
}

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap响应表不响应

4条答案

相关问题

热门标签

最新问答