[英]Twitter Bootstrap Width Auto Issue
I'm working on a mobile version of a website which allows the user to view either the navbar or the content area at any one time. 我正在开发一个移动版本的网站,该网站允许用户随时查看导航栏或内容区域。 I found and modified a jsfiddle to nearly do what I'd like... 我发现并修改了jsfiddle几乎可以完成我想要的...
http://jsfiddle.net/SfGAB/2/ http://jsfiddle.net/SfGAB/2/
Notice the 100% width, if you click the link and then open the nav again, it is much smaller (width: auto). 注意100%的宽度,如果您单击链接,然后再次打开导航,它会小得多(宽度:自动)。 This is due to this part of Twitter Bootstrap's Collapse javascript: 这是由于Twitter Bootstrap的Collapse JavaScript的这一部分所致:
reset: function (size) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
return this
}
I assume I can swap out 'auto' for '100%', but that doesn't seem like an ideal solution. 我认为我可以将“自动”换成“ 100%”,但这似乎不是理想的解决方案。 Anyone have a suggestion? 有人有建议吗?
So what I ended up doing was not using Bootstrap's code like this... 所以我最终没有做的就是使用Bootstrap的代码...
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
I just used javascript code and css like so: 我只是像这样使用javascript代码和CSS:
#nav.in {
width:0;
}
#nav.out {
width:50%;
}
#nav.collapse {
float:left;
}
#nav.width {
position: relative;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
And then for javascript code... 然后获取JavaScript代码...
$('#nav').toggleClass('in').toggleClass('out');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.