Html CSS创建相邻的图像链接

我试图创建一组四个图标，链接到网站的其余部分。目前，所有编码都可以正常工作，直到所有四个都设置好，其中只有一个可以工作

我正在使用基金会创建一个响应性网站

   <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>

---

您的_settings.scs中的列设置为什么？如果你有大6，这将占据你页面的50%。您可以将每个列都设置为大3，或者将总列数更改为24

$total-columns: 12;

定义“作品”。另外，相关CSS在哪里？