Zurb基金會div.row中的列沒有崩潰

我遇到了Foundation 5的問題，我試圖讓行div中的列有倒塌的水槽。更具體地說，我有興趣摺疊外欄排水溝，以便我的導航欄和標題div很好地排列。我嘗試將.collapse類應用於包含的行div以及每個列元素，但無濟於事。Zurb基金會div.row中的列沒有崩潰

如果有人能幫我弄清楚我錯過了什麼，我會非常感激！下面是頁面問題部分和屏幕截圖的代碼，以便您可以看到我正在嘗試完成的內容。

最終我想在頁面的任一側用漸變漸變（藍色到灰色）創建一個窄的垂直條。如果可以在排水溝裏做到這一點，這也是解決我的問題的好辦法。提前致謝！

<!-- Header Image and Left Side Nav Links --> 

    <div class="row collapse"> 
    <div class="header-image"> 
     <nav class="top-bar-z top-bar large-12 medium-12 small-12 columns" data-topbar role="navigation" data-options="is_hover:false"> 
     <ul class="title-area"> 
      <li class="name"> 
      <h1> 
       <a href="#">Lacmhacarh</a> 
      </h1> 
      </li> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> 
     </ul> 

     <!-- Right Side Nav Links --> 
     <section class="top-bar-section"> 
      <ul class="right"> 
      <li class="divider"></li> 
      <li class="has-dropdown"> 
       <a href="#">Blog</a> 
       <ul class="dropdown"> 
       <li><a href="#">Archive</a></li> 
       <li><a href="#">Resources</a></li> 
       <li class="divider"></li> 
       <li><a href="#">See all →</a></li> 
       </ul> 
      </li> 
      <li class="divider"></li> 
      <li class="has-dropdown"> 
       <a href="#">Portfolio</a> 
       <ul class="dropdown"> 
       <li class="divider"></li> 
       <li><a href="#">Résumé<i class="fi-play"></i></a></li> 
       <li><a href="http://www.github.com/danielbonnell">GitHub</a></li> 
       <li><a href="http://www.linkedin.com/in/danielbonnell">LinkedIn</a></li> 
       <li><a href="http://www.twitter.com/acidstealth">Twitter</a></li> 
       <li class="divider"></li> 
       <li><label>Special Projects</label></li> 
       <li><a href="http://www.abhnation.com/">The Abh Nation</a></li> 
       <li><a href="#">Something Cool Here</a></li> 
       </ul> 
      </li> 
      <li class="divider"></li> 
      <li><a href="#">Contact</a></li> 
      <li class="divider"></li> 
      </ul> 
     </section> 
     </nav> 

     <!-- Header Foreground Image --> 
     <div class="large-4 columns"> 
     <div class="header-logo-left"> 
     </div> 
     </div> 

     <div class="large-4 columns"> 
     <div class="header-logo-center"> 
     </div> 
     </div> 

     <div class="large-4 columns"> 
     <div class="header-logo-right"> 
     </div> 
     </div> 
    </div> 
    </div>

enter image description here

來源

2014-12-04 ACIDSTEALTH

後重新審視我想出代碼列水槽是不引起明顯的NAV-欄右側邊緣偏移的問題。在「聯繫人」按鈕之後，我添加了一個額外的分隔線，它增加了10px的空間。

下面是導航欄的那部分原始的HTML：

<li class="divider"></li> 
<li><a href="#">Contact</a></li> 
<li class="divider"></li>

而新代碼：

<li class="divider"></li> 
<li><a href="#">Contact</a></li>

來源

2014-12-04 14:43:48 ACIDSTEALTH

我認爲，爲了.collapse工作，。列必須是該行的第一個子div。

<div class="row collapse"> 
 
    <div class="large-12 columns"> <!--gets collapsed--> 
 
    Collapsed? 
 
    </div> 
 
    </div>

來源

2014-12-10 00:02:27

Zurb基金會div.row中的列沒有崩潰

回答

相關問題