波旁整洁的水平对齐div后显示无

时间:2013-08-31 21:49:25

标签: sass alignment bourbon neat

我有一个包含3个元素的标题,全尺寸布局(12列网格):

left = logo(3列),middle = nav(6列),right =社交媒体(3列)

在较小的尺寸(4列网格)中,我将“社交媒体”设置为不显示,“logo”和“nav”都是两列。它们没有水平对齐,第二个元素显示在第一个跨越两列但不是彼此相邻的情况下。我试过浮动,清理和所有爵士乐,但没有快乐。

这是HTML:

<header>

<div class="header">

    <a href="<!-- @path index.html/#page1 -->" id="logo">∆0Ω</a>

    <nav>
        <ul>
            <li class="nav-item"> <a href="<!-- @path index.html/#page1 -->">What?</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">How?</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">Work</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">Few!</a></li>
            <li class="nav-item hide"> <a href="//">Twitter</a></li>
            <li class="nav-item hide"> <a href="//">Facebook</a></li>
            <li class="nav-item hide"> <a href="//">LinkedIn</a></li>
        </ul>
    </nav>

    <div id="social">
        <ul>
            <li><a href="http://">t</a></li>
            <li><a href="http://">f</a></li>
            <li><a href="http://">in</a></li>
        </ul>
    </div>


</header>

这是scss:

header{


    background: tint(black, 70%);
    position: relative;
    width: 100%;
    top: 0;
    z-index:+100;


    @include large {
        position: fixed;
        height: 6.666666666666667%;
    }

}


.header {

        top: 0;
        height: 100%;
        @include outer-container;
        background: tint(black, 85%);
        text-align: center;
        z-index: +100;

    }


#logo {
    text-align: left;
    @include span-columns(2);

        @include large {
            @include span-columns(3);
          }

}

nav {
    @include span-columns(2);
    text-align: right;

        @include large {
            @include span-columns(6);
            text-align: center;

                    li {
                        display: inline-block;
                    }

                    .hide{
                        display: none;
                    }
          }
}


#social {

    display:none;

    @include large {
        @include span-columns(3);
        text-align: right;

            li {
                display: inline-block;
                }
         }

}

任何帮助都会很棒。

非常感谢, 亚历

1 个答案:

答案 0 :(得分:1)

为了解决这个问题,我使用了omega()include,将它添加到nav元素中以获得更小的屏幕:

nav {
    @include span-columns(2);
    @include omega();
    text-align: right;

        @include large {
            @include span-columns(6);
            text-align: center;

                    li {
                        display: inline-block;
                    }

                    .hide{
                        display: none;
                    }
          }
}

现在我的徽标和导航按照较小的屏幕尺寸水平对齐。