javascript - Twitter Bootstrap Width Auto Issue -

i'm working on mobile version of website allows user view either navbar or content area @ 1 time. found , modified jsfiddle i'd like...

http://jsfiddle.net/sfgab/2/

notice 100% width, if click link , open nav again, smaller (width: auto). due part of twitter bootstrap's 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 } 

i assume can swap out 'auto' '100%', doesn't seem ideal solution. have suggestion?

so ended doing not using bootstrap's code this...

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu"> 

i used javascript code , css so:

#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 javascript code...

$('#nav').toggleclass('in').toggleclass('out');