Question

我在这个主题中看到了一个问题 - 但那里的答案并不奏效。

所以，正如我在标题中所说，我有一个<div class="container">的页面。我希望在超小型设备（767px）中，此container将变为container-fluid。

有什么建议吗？

Answer 1

如果您查看Bootstrap CSS文件，.container类仅使用768px以上的固定宽度开始 - 低于该值（ 767px及以下），它只是跨越其父级的 100％，与container-fluid完全相同（默认div行为，尽管每侧填充15px）：

@media (min-width: 768px)
  .container {
    width: 750px;
  }

换句话说，从表面上看，如果你问我，以下风格适用于所有视口，那就毫无意义了：

.container, .container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

由于。容器宽度直到768px及以上才会启动，因为您可以看到container和container-fluid在767px以下的样式完全相同。

编辑 - 进一步对OP的评论，要从容器的左/右侧删除填充，我会先将一个辅助类附加到容器div：

<div class="container nopadding">

这可确保您不会覆盖Bootstrap的默认样式。然后您可以按如下方式设置样式：

.container.nopadding {
  padding-left: 0;
  padding-right: 0;
}

重要的是要确保将上述样式放在自定义CSS文件中，并且它引用了 AFTER 您的Bootstrap文件。

Answer 2

使用jquery可以控制它： container低于767时删除window.innerWidth类（例如：您想要的任何大小）并添加课程container-fluid

 $( function() {
if(window.innerWidth <767)
    {
        $(".container").addClass('container-fluid');
        $(".container").removeClass('container');
    }
});

用户更改窗口大小时

：

 $(window).resize(function(){
    if(window.innerWidth <767)
    {
        $(".container").addClass('container-fluid');
        $(".container").removeClass('container');
    }else
    {
        $(".container-fluid").addClass('container');
        $(".container-fluid").removeClass('container-fluid');
    }
});

从XS设备上的容器到容器流体

2 个答案: