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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19028916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:35:49  来源:igfitidea点击:

Bootstrap 3 disable responsive for desktop window resize

javascriptcsstwitter-bootstraptwitter-bootstrap-3

提问by TarranJones

bootstrap 3 works on the mobile first approach. so my desktop css is dependant on my css for smaller devices. I would like to disable responsiveness when the desktop browser window resizes but cant figure out how. I was directed to http://getbootstrap.com/getting-started/#disable-responsivewhich solved half the problem.

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

the width of the page issue has been fixed by the following

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

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

桌面.css

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

but it is still re-flowing my content because bootstrap is still picking up my column classes when the browser window resizes to the respective media query. eg col-sm-4, col-sm-offset-4. i could use javascript to change the col-sm to col-xs when it detects a desktop but offsets and column ordering are disabled for extra small devices.

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

would i have to write my own css overiding all unwanted boostrap?

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

http://jsfiddle.net/zVAEe/

http://jsfiddle.net/zVAEe/

please, any suggestions would be greatly appreciated.
thank you in advance.

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

采纳答案by Niklaus

Yes, you need to rewrite some of the CSS in desktop.css. This is pretty easily done as you could copy CSS from bootstrap's CSS file and just redefine what you want.

是的,您需要在 desktop.css 中重写一些 CSS。这很容易完成,因为您可以从引导程序的 CSS 文件中复制 CSS 并重新定义您想要的内容。

I checked you jsfiddle. Add this CSS to desktop.css and it works:

我检查了你 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%;
}