Question

我想了解我的bootstrap主题的响应性我在bootstrap.css中的每个容器类上将宽度设置为970px。但是当我缩小页面时，块会调整大小... 我想像谷歌或Facebook一样，当你缩小页面时，它只是在中间切入，而不是调整大小。我想要但无法实现的例子。

http://i.imgur.com/9WOJwuh.png这是一个图片示例。如果你不明白，那么第二个就在这里。 http://i.stack.imgur.com/t7nwf.jpg

任何帮助将不胜感激，因为我已经花了好几个小时来实现这一目标但没有成功，谢谢你。我需要任何代码请告诉我，我不确定插入哪个填充。

我希望这篇文章不违反任何规则。谢谢！

Answer 1

您是否尝试使用！important来装饰CSS属性？这可能会解决这个问题。

如果这不起作用，您应该可以查看Chrome或IE11 +或Firefox Firebug中的开发人员工具，您应该能够看到正在设置宽度的类。

PS：你可能想回过头来回答为什么你甚至使用Bootstrap，因为它听起来你正在禁用它的主要功能集。

Answer 2

您需要在所有断点处设置宽度。 Bootstrap在各种窗口宽度处设置宽度。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

所有这些都需要更新到新的固定宽度以停止调整大小。 E.g。

@media (min-width: 768px) {
      .container {
        width: 970px;
      }
    }
    @media (min-width: 992px) {
      .container {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {
      .container {
        width: 970px;
      }
    }

注意，这应该在你的.css文件中完成，而不是在bootstrap文件中完成。

CSS宽度，停用调整大小

2 个答案: