相关疑难解决方法(0)

我在一个项目上使用Twitter Bootstrap.除了默认的bootstrap样式,我还添加了一些自己的样式

//My styles
@media (max-width: 767px)
{
    //CSS here
}

当视口的宽度小于767px时,我也使用jQuery来更改页面上某些元素的顺序.

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

我遇到的问题是$(window).width()由CSS计算的宽度和CSS计算的宽度似乎不相同.当$(window).width()返回767时,css计算出视口宽度为751,因此似乎有16px不同.

有谁知道造成这种情况的原因以及如何解决问题？人们已经建议不考虑滚动条的宽度,使用$(window).innerWidth() < 751是要走的路.但理想情况下,我想找到一个计算滚动条宽度的解决方案,这与我的媒体查询一致(例如,两个条件都在检查值767).因为当然并非所有浏览器的滚动条宽度都是16px？

我想知道我的嵌套行是否可以加起来超过12？以这种方式工作是不对的？

我试了一下它似乎对我很好,但我想确保我做得对.

举个例子我可以这个吗？

<div class="col-md-10">
 <div class="container">
  <div class="row">   
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
 </div>
</div>