跪求bootstrap是怎么自适应布局的

Posted 2023-04-05

　　你理解的“自适应”是页面随着屏幕“缩放/zoom”？屏幕缩小，所有 input/button 也成比例缩小？
　　那不是自适应。试想按钮缩到 5px 宽，用户怎么点啊，那就近乎“不可用”了。

　　自适应地、在需要的时候换行，就是为了解决“不可用”：1080p 显示器能用，800*600 的爪机仍然能点得中（而不必大范围拖动/scroll）。

　　结论：换行是正确的表现；如果布局确实需要保证一行，就设置包含这坨控件的容器的最小宽度。
　　另：建议给按钮们加 icon（如 fontawesome），改善体验，读图比读字消耗的脑细胞少。
　　将尽可能多的内容、功能挤在一起已经不是最佳实践/潮流了。 参考技术A 是用栅格系统，一行2列，自动排序

自适应布局要素

1. 宽高百分比，不要固定死;
2. 弹性盒flex css3;
3. 单位（em、rem）px;
4. 媒体查询 - 利器 @media switch 960-1200;
5. gtid布局 - 网格布局;
6. view port - 手机布局利器;
7. 框架布局 - bootstrap、amazeUI、pure 等等几百种;