引导网格问题在768px

Question

我使用建议的断点方法，即col-xs，col-sm，col-md在我的网站上，这确实有效，但出于某种原因，我遇到了768px的问题，我相信应该是col-xs的断点

这是发生的事情

769px

768px

767px

最终，我预计767px和768px会显示相同的布局。

Answer 1

我这样解决了

@media (max-width: 768px){
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
  width: 100% !important;
}
}

Answer 2

只为col-sm输入值12：

COL-SM-12。

添加一行也很重要。

您的代码是这样的：

<div class="container">
<div class="row">
<div class="col-sm-12"><input ...></input></div>
<div class="col-sm-12"><input ...></input></div>
</div>
</div>

也许对于md＆amp; lg也是如此。对于xs，它看起来像你自己一样，就像你看到的那样。

如果你只是想让它自768以来发生，而不是在用JQuery切换类之前。

$(function() {
    if($(window).width()<769)
    {
        $("classofthediv").removeClass("col-sm-6");
        $("classofthediv").addClass("col-sm-12");
    }
});

如果您想要获得效果，即使您只是调整窗口大小，也许您需要添加$（window）.resize。

$( window ).resize(function() {
if($(window).width()<769)
    {
        $("classofthediv").removeClass("col-sm-6");
        $("classofthediv").addClass("col-sm-12");
    }
});

希望它有效！ ：）