html - 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 中设置的列是什么？如果你有 large-6，这将占据你页面的 50%。您可以将它们中的每一个都设置为 large-3，或者将您的 total-columns 更改为 24。

$total-columns: 12;