bootstrap怎么使容器自适应居中？

Posted 2023-05-17

你不想做非响应式，还是不要用这个框架就行了。当然还有以下方法
禁止响应式布局有如下几步：
移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。
通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。
如果使用了导航条，需要移除所有导航条的折叠和展开行为。
对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。 参考技术A 在容器标签上加上class="container"就可以了，关于更多bootstrap技巧可以找我哦

页面的自适应方法总结

一、使用前端框架，如bootstrap响应式布局，推荐使用

二、包裹一个容器，设置一个固定宽度如1200px，并设置居中，里面的内容可以写具体的px值，不同电脑显示的两边的空白大小不一样。

三、使用百分比，各个部分都使用百分比。这种编码难度大，难以掌控，测试困难，一般少用。

四、针对不同分辨率写不同css文件，不推荐使用。（包含媒体查询media）

五、用js/jquery动态调整一些值的大小，但是页面上较多元素都会变形的情况不推荐使用。

六、百分比和em结合使用。

七、使用rem来作为单位写样式，需要借助js来获取分辨率大小调整rem，pc端兼容差，适合移动端。