css - Bootstrap 响应式不居中 482px 以下的元素

Question

一旦屏幕宽度低于 482 像素，我使用 Bootstrap 框架设计的简单页面就会停止响应？我唯一能发现的是，一旦屏幕达到表单输入字段的宽度加上两边等量的填充，它就会停止调整元素，因此我怀疑这个问题在某种程度上与表单输入字段宽度设置有关，但是我不确定。有人可以帮忙吗？我已经阅读了文档，但我对解决方案一无所知。

这是我的 Bootstrap :http://www.bootply.com/DLxLacH4Jy#

Answer 1

Bootstrap 有以下断点

@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

所以如果你想为小于 482px 的屏幕应用一些特定的样式你所要做的就是像这样写类

@media (max-width: 482px) {
  .class-to-center {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
}