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);

}

desktop.css

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

但是由于Bootstrap仍然会在浏览器窗口调整到相应的媒体查询时选择我的列类，所以它仍然会重新流动我的内容。例如col-sm-4，col-sm-offset-4。 当检测到桌面时，我可以使用JavaScript将col-sm更改为col-xs，但是对于超小设备，偏移和列排序被禁用。 我是否需要编写自己的CSS来覆盖所有不需要的Bootstrap？

http://jsfiddle.net/zVAEe/

希望能得到您的建议，非常感谢。
提前致谢。

- TarranJones

---

为什么不直接阅读他们的文档？http://getbootstrap.com/getting-started/#disable-responsive - Tigran Petrossian

请尝试使用 https://github.com/bassjobsen/non-responsive-tb3 软件包。 - Bass Jobsen

可能是Bootstrap 3 - non-responsive?的重复问题。 - Bass Jobsen

目前尚不清楚问题所在，或者你为什么要编写 JavaScript 来完成 Twitter 自己称之为 CSS/HTML 事务的工作。请向我们展示演示文稿，或告诉我们提供的修复方案存在何种问题。我猜测你可能错过或误解了某个步骤。 - isherwood

首先感谢您指引我查看文档，这确实解决了我的一半问题。虽然我不喜欢阅读，但我已经仔细阅读了文档！正如我所说，我可以使用.col-xs-*，但这不能帮助我区分桌面浏览器调整大小和移动设备。我添加了一个jsfiddle，请随意编辑，因为显然我漏掉了某些东西。 - TarranJones

Answer 1

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

我检查了你的jsfiddle。在desktop.css中添加此CSS即可。

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

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

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

- Niklaus