响应式元素不会在 768 到 785 像素之间堆叠

Question

我需要另辟蹊径，感谢您抽出宝贵时间。我有一个基于 Zurb Foundation 的商业模板，它使用 jQuery 根据页面宽度移动几个元素。我遇到了麻烦，可能是由于对基础数学的无知，我可以用一只手。

Here's the static template

相关的 jQuery 是一个在 doc ready 和 resize 时触发的函数：

function organize() {
    var welcome = $('#welcome').remove();
    var sidebar = $('#sidebar');
    var innerwidth = $('body').innerWidth();

    // Move the Welcome DIV - we ALWAYS do this
    welcome.appendTo('#content-wrap');

    // If we're mobile, let's move a few things around
    if( innerwidth < 768 ) {
        if (!sidebar.hasClass('mobile')) {
            var sidecut = sidebar.addClass('mobile').detach();
            sidecut.prependTo('#content-wrap')
        }
    }
    // If we've gone bigger, put things back where we found them
    if( innerwidth >= 768) {
        if (sidebar.hasClass('mobile')) {
            var sidefix = sidebar.removeClass('mobile').detach();
            sidefix.insertAfter('#primary');

        }
    }
}

如您所见，使用 768px 断点我将侧边栏移动到顶部而不是底部，否则它将根据源顺序堆叠。我也尝试过 document.width 但 innerWidth 似乎提供了额外的像素容差。虽然中断是在 768，但我一直遇到 CSS 问题，直到 785，此时一切都会自行解决。

CSS的相关位在这里（SCSS格式）

// Shop Menu
#shopmenu {
  ul {
    list-style: none;
    margin: 0 0 80px 0;
    padding: 0;
    @include display;
    li {
      background: $level-4;
      font-size:20px;
      border-bottom: 1px solid $level-3;
      &:first-child {
        padding: 0 10px;
        font-size: 22px;
      }
      &:last-child {border-bottom: none;}
      a {
        color: rgb(25,25,25);
        padding: 0 20px;
        &:hover {
          text-decoration: underline;
        }
      }
      ul {
        margin: 0;
        padding: 0;
        ul {
          padding-left: 25px;
          ul {
            padding-left: 30px;
            ul {
              padding-left: 35px;
            }
          }
        }
      }
      li {
        background: $level-4;
        font-size:17px;
        &:first-child {
          padding: 0;
          font-size: 20px;
        }
        a {
          padding: 0 30px;
          font-size: 16px;
        }
        li {
          border: none;
        }
      }
    }
  }
}

除了调整一些填充之外，我并没有对 CSS 中的断点做太多事情，这不是问题（如果没有那个部分，它仍然存在）。这包括检查了#content-wrap ul.products li 的附加断点，我在其中更改了% 宽度以证明LI based on this technique 的合理性。同样，即使我转到无样式列表，问题仍然存在。

希望有人在我 4 小时后醒来时发现我的笨蛋。

Answer 1

感谢您查看此内容。最终，我设法通过删除所有用于移动元素块的 jQuery 并手动遵循它们的方向来找到解决方案。就在那时，我想起了 Foundation 推/拉类实际上触发了它们自己的基于 JS 的源排序，这与我的其他说明相冲突。

我最终重构了脚本（无论如何都需要）以将“移动”类放在主体上，然后从那里我给出指示，不仅要适当地移动项目，而且还要 addClass() 或 removeClass() 推送/pull 基金会命令。

// We need a function to add and remove the mobile class based on width
function setmobile() {
    thewidth = $(document).width(); // refresh this value when setting anew
    if (thewidth < 768) {
        thebody.addClass('mobile');
    } else {
        thebody.removeClass('mobile');
    }
}


// The source order is not the display order, let's play
function organize() {
    // Move the Welcome DIV - we ALWAYS do this
    var welcome = $('#welcome').remove();
    welcome.appendTo('#content-wrap');

    // If we're mobile, let's move a few things around
    if (!thebody.hasClass('mobile')) {
        var sidemain = sidebar.detach();
        sidemain.insertAfter('#primary');
        sidebar.addClass('pull-9');
        primary.addClass('push-3');
    }

    // If we've gone bigger, put things back where we found them
    if (thebody.hasClass('mobile')) {
        var sidemobile = sidebar.detach();
        sidemobile.insertAfter('#navwrap');
        sidebar.removeClass('pull-9');
        primary.removeClass('push-3');
    }
}

之后，在页面准备就绪时运行 setmobile() 和organize() 是一件简单的事情，并在调整大小时通过反跳脚本。

在移动设备中删除 .push-3 和 .pull-9 但在桌面模式中添加后，整个事情按预期工作。

Answer 2

快速解决方案是将float:left; 添加到<li> 元素而不是display:inline-block;

使用display:inline-block的问题是元素之间添加的空间，这个属性在元素之间增加了4 px的空间。