使 Bootstrap 列流畅，（自动调整）现在它们在小屏幕上堆叠
Make Bootstrap Columns Fluid, (Auto Adjustable) now they are stacking on small screen
我没有声誉请检查 link 但删除空格
问题 1
我不熟悉响应式和 Bootstrap，固定宽度为 980 像素。我为 6 个图标创建了 6 列，在桌面视图中它们看起来像这样，http://imgur.com/yZ3ZKMi but in Mobile view they are stacking, My boss wants that it should change according to view, like in tablet mode it should show 3 icons per row, and in mobile view 2 icons per view. How can I achieve that? http://goo.gl/XkNc39
问题 2
我的布局是 980 像素的固定宽度，但在小视图上它超出了区域。我不太了解媒体查询。我不明白我做错了什么。
- 桌面视图：http://imgur.com/rgtRGVy
- 移动视图：http://imgur.com/8g62MLx（离开区域）
提前致谢
问题 1
Bootstrap 网格（与大多数网格系统一样）始终计数为 12。这意味着您应该计算需要使用的列的大小。例如：如果您想要 4 个项目并排放置，您可以使用 12 / 4 = 3，因此您可以使用 col-..-3。
您应该用于图标的类是
<div class="col-md-3 col-sm-4 col-xs-6">
类 解释：在中型设备 (col-md-3) 上，项目的宽度为 3 列，因此每行 4 个项目。在小型设备 (col-sm-4) 上，项目的宽度为 4 列，因此每行 3 个项目。在超小型设备 (col-xs-6) 上，项目的宽度为 6 列，因此每行 2 个项目。
我已经编辑了你的 CodePen，现在可以使用了。
http://codepen.io/anon/pen/avoqeg
问题2
它可能与 margin/padding 有关。您可以尝试查看开发人员控制台（右键单击 > 检查元素）。或者您可以在另一个 CodePen 中重现该问题，以便我查看。
我没有声誉请检查 link 但删除空格
问题 1
我不熟悉响应式和 Bootstrap，固定宽度为 980 像素。我为 6 个图标创建了 6 列，在桌面视图中它们看起来像这样，http://imgur.com/yZ3ZKMi but in Mobile view they are stacking, My boss wants that it should change according to view, like in tablet mode it should show 3 icons per row, and in mobile view 2 icons per view. How can I achieve that? http://goo.gl/XkNc39
问题 2
我的布局是 980 像素的固定宽度，但在小视图上它超出了区域。我不太了解媒体查询。我不明白我做错了什么。
- 桌面视图：http://imgur.com/rgtRGVy
- 移动视图：http://imgur.com/8g62MLx（离开区域）
提前致谢
问题 1
Bootstrap 网格（与大多数网格系统一样）始终计数为 12。这意味着您应该计算需要使用的列的大小。例如：如果您想要 4 个项目并排放置，您可以使用 12 / 4 = 3，因此您可以使用 col-..-3。
您应该用于图标的类是
<div class="col-md-3 col-sm-4 col-xs-6">
类 解释：在中型设备 (col-md-3) 上，项目的宽度为 3 列，因此每行 4 个项目。在小型设备 (col-sm-4) 上，项目的宽度为 4 列，因此每行 3 个项目。在超小型设备 (col-xs-6) 上，项目的宽度为 6 列，因此每行 2 个项目。
我已经编辑了你的 CodePen，现在可以使用了。 http://codepen.io/anon/pen/avoqeg
问题2
它可能与 margin/padding 有关。您可以尝试查看开发人员控制台（右键单击 > 检查元素）。或者您可以在另一个 CodePen 中重现该问题，以便我查看。