Jquery 在引导网格系统中，如何在某个视口中将列转换为行

我想做什么？

---

在>580px视口中，我在页脚中有一行，有三列，在上，这可以在没有jquery的情况下完成。 根据您的HTML代码，请在样式表末尾添加以下CSS

@media only screen and (max-width:580px) {
 footer .col-xs-4     {width:50%!important;}
}

---

您需要使用col-{size}，而不是引导程序4中的col xs-{size}

资源





跟随








简述

终于找到了修复方法

通过更改此选项：

function toDefault() {
   $('.follow, .resources').removeClass('col-xs-6'); # change to col-xs-5
   $('.briefDescrp').removeClass('row'); # remove this
   $('.briefDescrp div').removeClass('col-xs-offset-1 col-xs-11'); # remove 'div'
   $('.follow, .resources, .briefDescrp').addClass('col-xs-4');
}

function onExtraSmallDevices() {
   $('.resources, .follow, .briefDescrp').removeClass('col-xs-4');
   $('.resources, .follow').addClass('col-xs-6'); # change to col-xs-5
   $('.briefDescrp').addClass('row'); # remove this
   $('.briefDescrp div').addClass('col-xs-offset-1 col-xs-11'); # remove 'div'
}

对此：

function toDefault() {
    $('.follow, .resources').removeClass('col-xs-5');
    $('.briefDescrp').removeClass('col-xs-offset-1 col-xs-11');
    $('.follow, .resources, .briefDescrp').addClass('col-xs-4');
}

function onExtraSmallDevices() {
    $('.resources, .follow, .briefDescrp').removeClass('col-xs-4');
    $('.resources, .follow').addClass('col-xs-5');
    $('.briefDescrp').addClass('col-xs-offset-1 col-xs-11');
}          

---

你是如何调用这个函数的？我运行了这个代码，但是在body元素上找不到任何填充，你能给我css文件吗？Ashishsah编辑了我的帖子，看看。你能把你的代码上传到js-bin上吗？我想已经解决了这个问题。我刚刚删除了添加的行，并将

col-xs-6

更改为

col-xs-5

是否希望第三列在其下降后为全宽，窗口宽度小于580视图？是的，绝对如此。我使用

$（'.briefDescrp div'）.addClass（'col-xs-offset-1 col-xs-11'）在我的jQuery函数中。你能试试这个代码吗？footer.row>div:last child{width:100%！important}我这样做了，但我仍然得到了填充。最后一列没有跨越整个宽度。我没有使用Bootstrap4。我使用bootstrap3。为什么您的代码段使用bootstrap4？：）我没有创建代码片段。其他人编辑了我的问题。哦，事实上，在Bootstrap3中580px没有断点，我建议你迁移到Bootstrap4。另一种方法是编辑grid.less文件并添加自定义断点。Ps：对我来说，使用jquery来修复布局是不值得的！我将
bootstrap.min.css
和
bootstrap.min.js
从3替换为4。但我还是注意到了身体上的填充物。