【问题标题】：Make Bootstrap 3 have same breakpoints as Bootstrap 2使 Bootstrap 3 具有与 Bootstrap 2 相同的断点
【发布时间】：2014-02-13 17:15:26
【问题描述】：

我正在将 Bootstrap 2 站点转换为 Bootstrap 3。我根本没有更改布局，我需要断点在此转换过程中保持不变。

Bootstrap 2 分解为 iPad 纵向视口中的堆叠移动视图，我相信它是 992 像素。我知道您可以在此处自定义 Bootstrap 3 的断点：http://getbootstrap.com/customize/ 但我想知道我应该设置 4 个 LESS 断点变量以使其像 Bootstrap 2 一样分解？

【问题讨论】：

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3 breakpoints

【解决方案1】：

Bootstrap 2 与 Bootstrap 3 @media 比较

大型设备：台式机

引导程序 2 >= 1200 像素

引导程序 3 >= 1200 像素

中型设备

引导程序 2 >= 768px 和

引导程序 3 >= 992 像素

小型设备：平板电脑

引导程序 2

引导 3 >= 768px

超小型设备

引导程序 2

引导程序 3

Twitter Bootstrap 2 宽度：

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Bootstrap 2 @media 文档位于 here
Bootstrap 3 @media 文档位于here

Great Migration Guide

【讨论】：

【解决方案2】：

您可能无法获得预期的行为，从 twitter-bootstrap-2 迁移到 twitter-bootstrap-3 因为：

TB3 是移动优先，而不是 TB2
TB3 使用 4 种不同的布局，TB2 使用 5 种

这里是 TB2 断点：

>=1200px：大屏
>=980px：默认
>=768px：平板电脑
<=767px：手机到平板电脑
<=480px：电话

还有 TB3 的：

<=767px : 超小设备（默认）
>=768px：小型设备
>=992px：中型设备
>=1200px：大型设备

如果幸运的话，Phones to tablets 和 Phones 的样式很相似。如果是，您只需设置这些 LESS 变量：

@screen-xs: 480px （默认）
@screen-sm: 768px （默认）
@screen-md: 980px
@screen-lg: 1200px （默认）

由于 Phones to tablets 和 Phones 布局在 TB2 中都是流畅的，因此您无需进行任何更改即可使其在 TB3 中正常工作。

如果您不幸运，并且Phones to tablets 和Phones 样式不同，则需要调整布局。你的问题是 TB3 合并了Phones to tablets 和Phones 布局，你不能轻易删除断点。

【讨论】：