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

Question

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

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

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

Answer 1

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

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

Answer 2

如果您还没有深入到您的站点，并且正在使用引导程序 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) { ... }

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