Bootstrap 的模态（与移动设备的兼容性问题）答案

【问题标题】：Modal of Bootstrap (compatibility issue with mobile devices)Bootstrap 的模态（与移动设备的兼容性问题）
【发布时间】：2014-02-10 18:05:18
【问题描述】：

我正在使用引导模式（版本 2）；默认大小是不可取的，所以我应用了以下 CSS：

#myModal{
    width: 80%;
    margin-left: -40%;
}

但问题是我的模态内容不再与移动设备兼容；我的意思是不再有水平滚动条，文本也没有内容了；但是，如果我不应用提到的 CSS，它与移动设备兼容；但问题是宽度对于我在桌面上的用途来说太小了。

【问题讨论】：

你能添加一个链接到它正在执行此操作的网站吗？
你的页面上有<meta name="viewport" content="width=device-width, initial-scale=1.0">吗？

标签： css twitter-bootstrap bootstrap-modal

【解决方案1】：

Bootstrap 就是使用媒体查询。由于您只关心桌面上的显示，因此您也应该考虑使用它们！您可以使用 min-width 值，但 789px 是 iPad 的常用值。

@media (min-width: 789px) {
          width:80%;
          margin-left: -40%;
       }

【讨论】：

【解决方案2】：

如果您没有深入了解您的网站，并且正在使用 bootstrap 2，我建议您将所有类转换为流畅的布局。这将在使用上述媒体查询时为您提供帮助。

如果您真的处于开发的早期阶段，我建议您切换到 bootstrap 3，因为它可以更好地处理响应行为。

无论哪种方式，bootstrap 2 都有一个 responsive.css 文件，其中包含一组很好的媒体查询来帮助您进行操作。

/* 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) { ... }

我的建议是检查重新调整浏览器和移动设备的大小，以检查您的网站是否正常。

【讨论】：