bootstrap 网格在 768px 的问题

Question

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

的断点

事情是这样的

769px

768px

767px

最终，我希望 767px 和 768px 显示相同的布局。

Answer 1

只需为 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&lg。对于 xs，它看起来自动像这样，如您所见。

如果你只是想让它从 768 开始而不是之前发生，只需将 class 切换为 JQuery。

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

也许你需要添加 $( window ).resize 如果你想要获得效果，即使你只是调整 window.

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

希望有用！ :)

Answer 2

我是这样解决的

@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;
}
}

bootstrap 网格在 768px 的问题

Issues with bootstrap grid at 768px

css

grid

media-queries

twitter-bootstrap

twitter-bootstrap-3