如何让现有的 bootstrap 2 表具有响应性？
-
Method 1:
要使表格对所有视口大小都有响应，请将表格包装在一个开始和结束
标签内，在开始标签内有类“表格响应”。
语法:
```html
...
```
示例:该示例描述了“表响应”类。
```html <!DOCTYPE html>
Bootstrap | Tablesh1{ color:blue; text-align: center; } div{ margin-top: 20px; }
```Bootstrap Table Responsive
Head Head Head Head Head Head Head Head Head Head Head Head Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data 输出:
当窗口大小正常时:
![]()
当窗口小时，即平板模式:
在平板和移动模式下都会出现滚动条。T3】
![]()
-
Method 2: Breakpoint specific
使用。表响应{-sm|-md|-lg|-xl}来创建直到特定断点的响应表。从该断点向上，表将正常运行，不会水平滚动。
| level | Screen width | | . Table -sm | < 576 像素 | | . Table-Response -MD | < 768 像素 | | . Table-Response -LG | < 992 像素 | | . Table-Response -XL | < 1200 像素 |
语法:
```html
...
```
示例:该示例描述了“表响应 sm”类。
```html <!DOCTYPE html>
Bootstrap | Tablesh1{ color:blue; text-align: center; } div{ margin-top: 20px; }
```Bootstrap Table Responsive-sm
Head Head Head Head Head Head Head Head Head Head Head Head Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data 输出:
当窗口大小为> 576px 时:
![]()
当窗口尺寸小于< 576px 时:
![]()
版权属于：月萌API www.moonapi.com，转载请注明出处
