Question

我正在使用bootstrap模式（版本2）;默认大小不合适所以我应用了以下CSS：

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

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

Answer 1

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

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

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

我的建议是检查重新调整浏览器的大小以及移动设备，以检查您的网站是否在一起。

Bootstrap的模式（与移动设备的兼容性问题）

2 个答案: