7

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

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

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

http://jsfiddle.net/zVAEe/

请，任何建议将不胜感激。
先感谢您。

4

1 回答 1

1

是的，你需要重写 desktop.css 中的一些 CSS。这很容易完成，因为您可以从引导程序的 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%;
}

于 2015-05-03T13:08:22.750 回答