11

有人可以解释 Bootstrap 3.0 Grid 系统吗？我一直在使用 Bootstrap v2 网格，它有简单的 span1 到 span12 的列。现在 Bootstrap 3.0 具有不同类型的列大小，例如 .col- .col-sm- .col-lg-

我找到了这个例子：http ://examples.getbootstrap.com/grid/index.html ，但它有很多不同的方式，比如我无法理解 .col-12 .col- 的“混合：移动和桌面”网格lg-8 在一起。

我希望将我的 Bootstrap v2 网站迁移到 Bootstrap v3，但是发现这些变化太多了。

请解释。

编辑：还得到了这篇解释 Bootstrap 3 Grid 的好文章（这篇文章是在我在这里问我的问题之后发表的。希望它对未来的读者有所帮助）：http ://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained /

4

2 回答 2

9

在 bootstrap 3 中查看有关新 Grid 系统的优秀教程

http://www.helloerik.com/bootstrap-3-grid-introduction

于 2013-09-19T01:14:31.680 回答
7

它的基本要点是 .col 类的不同迭代允许您为不同的设备（手机、平板电脑、台式机）指定网格行为。因此，在示例中，您询问的是.col-lg-8指定 div 在桌面上应占用 8 列，而.col-12在移动设备上指定 div 应占用 12 列（整行）。这种特殊性使您可以精确控制内容在不同屏幕尺寸上的布局方式，而这在 Bootstrap 2 中并不那么简单。

一般来说，我发现在实践中理解这些含义的最佳方法是在不同的设备类型上显示示例页面或重新调整浏览器窗口的大小并简单地比较结果。

此外，正如对您问题的评论中所述，从 Bootstrap 2 迁移到 3 的想法不一定是目标。您可以尝试通过将现有.span*类更新为新.col-*类来尝试这样做，但还有其他考虑因素，例如您现有的项目是固定宽度还是流动的，这可能会导致问题。除了网格布局之外，这两个版本之间还有许多其他更改也可能给您带来问题。

于 2013-08-06T17:30:43.187 回答