html - css bootstrap - 使网站在纵向方向上尽可能小，在横向上尽可能小

Question

我正在使用 Twitter Bootstrap 使我的网站响应。我知道 Bootstrap 适用于四种尺寸:

• x-small:适用于小于 768 像素的屏幕。
• 小:适用于小于 992 像素的屏幕。
• 中:适用于小于 1200 像素的屏幕。
• 大:适用于其他屏幕。

因此，我想在设备纵向方向上将我的网站显示为 x-small，在设备横向方向上显示为 small。

我将视口(viewport)元标记设置为:

<meta name='viewport' content='width=device-width, initial-scale=1'>

纵向显示一切正常，站点显示为 x-small。但问题是，在横向方向与平板电脑一样大的智能手机中，最好在如此宽的屏幕上将网站显示为小，但它一直显示为 x-small。

我尝试了不同的方法来编写该视口(viewport)元标记，例如设置固定宽度和更改比例，但似乎没有任何效果。

有人知道如何使用 Bootstrap 做到这一点吗？

Answer 1

1. 转到这里 http://getbootstrap.com/customize/
2. 定制
3. 下载
4. ????????
5. 利润

您的 bootstrap CSS 中还应该有一个链接来自定义它。

如果您做不到，您将需要手动检查所有 CSS 并更改 @media 屏幕和 (max-width: xxxpx) { 以匹配新布局。