Bootstrap 3禁用响应桌面窗口调整大小

Tar*_*nes 7 javascript css twitter-bootstrap twitter-bootstrap-3

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

}
Run Code Online (Sandbox Code Playgroud)

desktop.css

.container{
    max-width: none !important;
    width:970px;}
Run Code Online (Sandbox Code Playgroud)

但它仍在重新流动我的内容,因为当浏览器窗口调整到相应的媒体查询时,引导程序仍在拾取我的列类.例如col-sm-4,col-sm-offset-4.我可以使用javascript在检测到桌面时将col-sm更改为col-xs,但是对于额外的小型设备禁用偏移和列排序.

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

http://jsfiddle.net/zVAEe/

请,任何建议将不胜感激.
先感谢您.

Nik*_*aus 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%;
}
Run Code Online (Sandbox Code Playgroud)