bootstrap设置手机访问的时候,tr中最后两个td不显示
时间: 2024-02-05 08:12:47 浏览: 40
可能是因为在手机上屏幕宽度不足,导致最后两个td被隐藏了。可以尝试使用Bootstrap的响应式工具类来解决这个问题。
首先,可以给table添加`table-responsive`类,这样当屏幕宽度不够时,表格会自动出现横向滚动条,以便用户能够查看整个表格。例如:
```html
<div class="table-responsive">
<table class="table">
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
</div>
```
如果仍然无法显示最后两个td,可以考虑使用Bootstrap的响应式工具类来控制列的宽度。例如,可以给前面的列添加`col-*`类,给最后两个列添加`col-sm-*`类,这样当屏幕宽度小于sm(768px)时,最后两个列会被隐藏,而在大屏幕上则可以正常显示。例如:
```html
<div class="table-responsive">
<table class="table">
<tr>
<td class="col-xs-2">...</td>
<td class="col-xs-2">...</td>
<td class="col-xs-4 col-sm-6">...</td>
<td class="col-xs-4 col-sm-6">...</td>
</tr>
</table>
</div>
```
以上示例中,前面的两列在所有屏幕大小下都会占用相同的宽度(即占据表格宽度的1/3),而最后两列在小屏幕上会被隐藏,而在大屏幕上则会占据表格宽度的一半。您可以根据具体情况调整列宽度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)