響應式元素不會在768和785像素之間正確堆疊

Question

我需要另一組眼睛，因此感謝您的時間。我有一個基於Zurb基金會的商業模板，它基於頁面的寬度使用jQuery移動幾個元素。我碰到了一個麻煩，可能是因爲對基礎數學的無知，我可以用一隻手。

Here's the static template

相關的jQuery的是，在DOC觸發準備和調整大小功能：

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小時內醒來的時候發現我的derp。

Answer 1

感謝您關注此事。最後，我設法通過移除用於移動元素塊的所有jQuery並按照手動方向找到解決方案。那時我記得基金會推/拉類實際上觸發了他們自己的基於JS的源排序，這與我的其他方向相沖突。我最終重構了腳本（需要以任何方式）將「mobile」類放在body上，然後從那裏給出指令，不僅適當地移動項目，而且還將addClass（）或removeClass（）推/拉基礎命令。

// 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運行（），並準備頁組織（），再加上通過調整大小去抖腳本。

在移動設備中刪除了.push-3和.pull-9，但在桌面模式下添加後，整個事情按預期工作。

Answer 2

連結溶液加入float:left;到<li>元素，而不是display:inline-block;

display:inline-block使用的問題是空間中的元素之間加入，這個屬性增加了元件之間的4像素的空間。