Zurb基金會4部分崩潰

試圖用Zurb基金會實施部分4.3.2。我已經確保包含js和css文件的右邊，並在js腳本中初始化基礎，但該部分繼續將所有內容和按鈕合併到一起。第一部分/標籤也沒有出現。Zurb基金會4部分崩潰

編輯：這裏有一個JS小提琴：http://jsfiddle.net/ethanova/R2SdH/（我第一次，所以如果我進行某種最壞的做法，讓我知道）

製作的jsfiddle後，我意識到，這對小dpi的正常工作屏幕（在JSFiddle提供的小區域看起來沒問題，即使點擊標籤不起作用 - 我使用我的實際代碼進行了檢查，並使瀏覽器窗口更小，將部分切換到Accordion並且效果很好）。所以看起來它只有在更大的屏幕尺寸時纔會恢復爲製表符，即該部分摺疊並且不起作用。

關於發生什麼問題的任何想法？多謝你們。

 <!-- foundation zurb --> 
     <link rel="stylesheet" href="./css/foundation.min.css"> 
     <link rel="stylesheet" href="./css/normalize.css"> 

     <!-- JAVASCRIPT --> 
     <script src='../../js/vendor/jquery.js'></script> 
     <!-- zurb foundation --> 
     <script src="../../js/foundation.min.js"></script> 
     <script src="../../js/vendor/custom.modernizr.js"></script> 
     <script> 
      $(document).foundation(); 
     </script> 
    </head> 
    <body> 
    <div class='row'> 
    <div class='small-12 columns'> 
     123 Street Name <br /> City, ST Zip <br /> 
    </div> 
    </div> 
    <div class='row'> 
    <div class='large-8 columns'> 
     <div class="section-container auto" data-section data-section-resized> 
      <section class="active"> 
       <p class="title" data-section-title><a href="#panel1">Details</a></p> 
       <div class="content" data-section-content> 
        <p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p> 
       </div> 
      </section> 
      <section> 
       <p class="title" data-section-title><a href="#panel2">Improvements</a></p> 
       <div class="content" data-section-content> 
        <p>Any improvements data</p> 
       </div> 
      </section> 
      <section> 
       <p class="title" data-section-title><a href="#panel3">Mortgage</a></p> 
       <div class="content" data-section-content> 
        <p>Mortage data.</p> 
       </div> 
      </section> 
      <section> 
       <p class="title" data-section-title><a href="#panel4">Lease</a></p> 
       <div class="content" data-section-content> 
        <p>Lease data.</p> 
       </div> 
      </section> 
      <section> 
       <p class="title" data-section-title><a href="#panel5">Lien</a></p> 
       <div class="content" data-section-content> 
        <p>Lien data.</p> 
       </div> 
      </section> 
     </div> 
    </div> 
    <div class='large-4 columns'> 
     Map Goes Here 
    </div> 
    </div> 
    <div class='row'> 
    <div class='large-12 columns'> 
     Related people 
    </div> 
    </div> 
<div class='row'> 
    <div class='large-12 columns'> 
     Related properties 
    </div> 
</div>

來源

2013-10-23 Ethan

任何人都願意看看這個你首先需要創建您的代碼工作的jsfiddle。機會是，這不會發生。如果你自己創建一個，你會很快看到一些評論/回答。 –

謝謝，我添加了一個JSFiddle來說明如果給結果框足夠的空間（使其變大），問題。 – Ethan

很難用jsfiddle完全確定這一點，但它看起來像你的JavaScript沒有正確加載。檢查控制檯，當你的實際網站（而不是jsfiddle）加載時，我猜一些事情是亂序的。 –

經過一些更多的測試後，我想通了。我從他們的Section頁面下載了源代碼，並開始插入我的代碼，試圖使其工作。我第一次來到這裏的原因是因爲我的部分消失了一個點，另一個stackoverflow答案說只需將「數據部分調整大小」添加到部分容器div。那麼，不要。這讓它回到了隱形狀態。我已經從頭部刪除了一些js，以便與他們更接近地匹配，這是一個錯誤。這是我的部分和頭看起來像現在：

頁眉：

<!-- foundation zurb --> 
    <link rel="stylesheet" href="../../css/foundation.min.css"> 
    <link rel="stylesheet" href="../../css/normalize.css"> 
    <link rel="stylesheet" href="../../css/general_foundicons.css"> 
    <!-- zurb foundation --> 
    <script src="../../js/foundation/foundation.js"></script> 
    <script src="../../js/foundation/foundation.section.js"></script> 
    <script src="../../js/vendor/custom.modernizr.js"></script>

據稱，foundation.min.js包括像所有其他部分。我可以確認，如果您嘗試用foundation.min.js替換foundation.js和foundation.section.js，它將無法工作。如果保留section.js並將其更改爲foundation.js爲foundation.min.js，那麼它將不起作用。你必須有foundation.js和foundation.section.js。

科：

<div class='row'> 
<div class='large-8 columns'> 
    <div class="section-container auto" data-section> 
     <section class="active"> 
      <p class="title" data-section-title><a href="#panel1">Details</a></p> 
      <div class="content" data-section-content> 
       <p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p> 
      </div> 
     </section> 
     <section> 
      <p class="title" data-section-title><a href="#panel2">Improvements</a></p> 
      <div class="content" data-section-content> 
       <p>Any improvements data</p> 
      </div> 
     </section> 
     <section> 
      <p class="title" data-section-title><a href="#panel3">Mortgage</a></p> 
      <div class="content" data-section-content> 
       <p>Mortage data.</p> 
      </div> 
     </section> 
     <section> 
      <p class="title" data-section-title><a href="#panel4">Lease</a></p> 
      <div class="content" data-section-content> 
       <p>Lease data.</p> 
      </div> 
     </section> 
     <section> 
      <p class="title" data-section-title><a href="#panel5">Lien</a></p> 
      <div class="content" data-section-content> 
       <p>Lien data.</p> 
      </div> 
     </section> 
    </div> 
</div> 
<div class='large-4 columns'> 
    Map Goes Here 
</div> 
</div>

來源

2013-10-25 00:11:43 Ethan

奇怪... foundation.min.js應該工作。你在基金會4.3.2上嗎？ –

是的，打開了foundation.min.js只是爲了確認，它顯示了4.3.2 – Ethan

Zurb基金會4部分崩潰

回答

相關問題