什么是从无响应到自适应响应的最简单方法？

Question

当我设计我的网站时，我犯了一个无响应（http://getbootstrap.com/examples/non-responsive/）的错误，因为我对此并不了解。现在，我意识到这是一个错误，我想纠正它。我的主要问题是：

1. 我在整个网站上使用col-xs。
2. 除bootstrap.min.css文件外，我还使用了以下自定义CSS文件：

对于默认的CSS，我使用：

body {
  min-width: 970px;
}
...

与http://getbootstrap.com/examples/non-responsive/non-responsive.css非常相似

然后我走得更远：

@media (min-width: 1200px) { 
(some more custom CSS here, mainly font sizes)
}

对我来说，最简单的方法是将此网站转换为响应式广告？我猜我可能需要修改所有代码并添加col-md，col-lg，我是否正确？

任何帮助和建议都会非常感激，以纠正这个虚假的大错误：）

Answer 1

bootstrap中网格系统的简短说明：

就像你已经知道不同的视口有几个类。

但实际上你并不需要所有这些：

例如

- 如果您有3x col-lg-4并且在1170px下调整浏览器大小，这些框架将不会浮动，它们将会中断。

如果你有3x col-md-4并且在970px下调整浏览器大小，那么这些盒子将不再浮动。

col-xs将始终浮动，始终是水平的，永远不会破坏。

您还忘了提及是否要使用完全流畅的响应或断点响应，这会对使用.container类产生影响。

.container-fluid用于完全流体设计，.container用于最大宽度为1170px的页面。