CSS創建圖像鏈接彼此相鄰

Question

我試圖創建一組鏈接到網站其餘部分的一組圖標。目前編碼都可以正常工作，直到全部四個設置完成，然後只有一個工作。

我正在使用基金會創建一個響應式網站。

<div class="row"> 
      <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns"> 
      <div id="portfolio_link"> 
      <a href="#portfolio_page"> 
       <img src="img/portfolio.png" style="width:80px"> 
      </a> 
      </div> 
      </div> 

      <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns"> 
      <div id="contact_link"> 
      <a href="#contact_page"> 
       <img src="img/Contact.png" style="width:80px"> 
      </a> 
      </div> 
      </div> 

      <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns"> 
      <div id="home_link"> 
      <a href="#home_page"> 
       <img src="img/home.png" style="width:87px"> 
      </a> 
      </div> 
      </div> 

      <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns"> 
      <div id="about_link"> 
      <a href="#about_page"> 
       <img src="img/about.png" style="width:80px"> 
      </a> 
      </div> 
      </div> 

Answer 1

什麼是您的列設置在您的_settings.scss？如果你的大6，這將佔用你網頁的50％。您可以將其中的每一個設置爲大3，或將總列數更改爲24.

$total-columns: 12;