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?
请,任何建议将不胜感激.
先感谢您.
是的,您需要重写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)
归档时间: |
|
查看次数: |
10479 次 |
最近记录: |