javascript - Bootstrap 3 禁用对桌面窗口大小调整的响应

Question

bootstrap 3 采用移动优先的方法。所以我的桌面 css 依赖于我的小型设备的 css。我想在桌面浏览器窗口调整大小时禁用响应，但无法弄清楚如何。我被定向到 http://getbootstrap.com/getting-started/#disable-responsive这解决了一半的问题。

页面宽度问题已通过以下方法修复

var desktop = screen.availWidth >= '768';
if(desktop)
{
  l=d.createElement('link');
  l.rel  = 'stylesheet';l.type = 'text/css';
  l.href = 'styles/desktop.css';
  l.media = 'all';
  h.appendChild(l);

}

桌面.css

.container{
    max-width: none !important;
    width:970px;}

但它仍在重新流动我的内容，因为当浏览器窗口调整为相应的媒体查询大小时，bootstrap 仍在选取我的列类。例如 col-sm-4、col-sm-offset-4。当它检测到桌面时，我可以使用 javascript 将 col-sm 更改为 col-xs，但对于超小型设备禁用了偏移量和列排序。

我是否必须编写自己的 css 来覆盖所有不需要的 boostrap？

http://jsfiddle.net/zVAEe/

如有任何建议，我们将不胜感激。
提前谢谢你。

Answer 1

是的，您需要重写 desktop.css 中的一些 CSS。这很容易完成，因为您可以从 bootstrap 的 CSS 文件中复制 CSS，然后重新定义您想要的内容。

我检查了你的 jsfiddle。将此 CSS 添加到 desktop.css 即可:

.col-sm-4 {
    width: 33.33333333333333%;
    float: left;
}

.col-sm-push-4 {
    left: 33.33333333333333%;
}

.col-sm-pull-4 {
    right: 33.33333333333333%;
}