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

Question

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

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

Answer 1

Bootstrap有以下断点

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

因此，如果您想为小于 482 像素的屏幕应用一些特定样式你所要做的就是像

这样写 class

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

Answer 2

我在示例中遇到的特定问题的解决方案是，我使用 bootstrap 网格 classes 的屏幕尺寸格式使表单过于复杂，例如.col-xs-4 /col-md-6 等，这扰乱了内联表单显示并试图覆盖它，不太理解是什么否定了内联显示，我使用宽度 class 来设置内联表单的宽度，这会停止响应性低于内联表单元素的设置宽度。

清理并更正了此处的代码； http://www.bootply.com/DLxLacH4Jy

我冒昧地将此添加为我自己对问题的回答，因为它确实代表了我试图解决的确切问题的解决方案，但是 Yuyokk 和 Joe Conlin 的上述评论直接相关并且也有帮助，如果不是我的问题的精确解决方案。

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

Bootstrap responsive not centering elements below 482px

html

css

responsive-design

twitter-bootstrap