Css XS设备上从一个容器到另一个容器的流体

我在这门课上看到了一个问题，但答案并不适用

因此，正如我在标题中所说，我有一个页面，上面有

。我希望在超小型设备（767px）中，这个

容器将变成
容器流体

有什么建议吗？
如果您查看引导CSS文件，那么
.container
类只会从
768px
向上开始使用固定宽度-低于该宽度（767px及以下）），它只会跨越其父级的100%，与
容器流体
（默认div行为，尽管每侧填充15px）：

换句话说，从表面上看，如果你问我以下样式适用于所有视口，这是毫无意义的：

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

由于.容器宽度在768px及以上时才开始生效，正如您所看到的
容器
和
容器流体
在767px以下的样式完全相同

编辑-根据OP的注释，要删除容器左/右侧的填充，我首先将第二个类附加到容器div：

<div class="container nopadding">

重要的是要确保上述样式放置在自定义CSS文件中，并在引导文件之后引用。
使用jquery可以控制它：
当
窗口时，移除
容器
类。innerWidth
小于767（例如：您想要的任何尺寸），并添加类
容器流体

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

$（函数（）{
如果（window.innerWidth这是一个糟糕的解决方案，因为如果我继续最小化我的浏览器，它将永远堆叠在宽度上：750px，我的网站将不会响应…这根本不是一个解决方案-我只是简单地说明发生了什么-使用容器流体或低于767px的容器绝对没有任何区别。这是padd的15px默认情况下，在左侧和右侧都添加容器和容器流体……如果这是您想要达到的目的，我将编辑我的答案以删除填充物？不，没关系，我只是认为可以达到所有屏幕，但没有它我会很好。感谢您的解释。没问题-我添加了另一点对于我的答案，请随意使用：-）
.container.nopadding {
  padding-left: 0;
  padding-right: 0;
}

 $( 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');
    }
});