Question

我正在尝试创建一个3列响应式页脚，如果窗口小，我想要每个div＆＃34; foo_col＆＃34;显示第一个div.ie的下降 foo_col_1 foo_col_2 foo_col_3

--- HTML code -----

<footer>
        <section class="layout">
            <div class="foo_row">
                <div class="foo_col">
                    <ul class="nav">
                        <li><a href="#"><i class="icon-home"></i>Home</a></li>
                        <li><a href="#"><i class="icon-question-sign"></i>About Us</a></li>
                        <li><a href="#"><i class="icon-h"></i>Sign In</a></li>
                        <li><a href="#"><i class="icon-heart"></i>Register</a></li>
                    </ul>
                </div><!-- foo_col_1 -->

                <div class="foo_col">
                    <ul class="nav">
                        <li><a href="#">All Location</a></li>
                    </ul>
                </div><!-- foo_col_2 -->

                <div class="foo_col">
                    <ul class="nav">
                        <li><a href="#"><i class="icon-keyboard"></i>Contact Us</a></li>
                    </ul>
                </div><!-- foo_col_2 -->

            </div><!-- foo_row -->

        </section><!-- section -->
    </footer><!-- footer -->

需要增强sass代码来处理小型窗口。目前在调整窗口页脚大小时，链接未正确对齐。

------ footer sass -----

footer{
    width: 100%;
    height: 200px;
    background: lighten($darkgray, 25); 

    @include at-breakpoint($medium){
        text-align:center;
        overflow: hidden;
    }

    ul.nav{

        li{
            a{
                color :$darkblue;
                font-size: .8em;
                padding: 5px 10px;
            }
        }
    }
}//footer

scss为3列响应页脚

0 个答案: