Question

我正在使用Foundation 5-Framework。我想创建一个带有面板的导航。添加面板时，导航栏始终位于面板顶部。

这是我的代码：

<div id="content">
        <div class="row">
            <div class="contain-to grid fixed">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1><a href="#">MySite</a></h1>
                        </li>
                        <li class="toggle-topbar menu-icon">
                            <a href="#"><span></span></a>
                        </li>
                    </ul>
                    <section class="top-bar-section">
                        <ul class="right">
                            <li class="active">
                                <a href="home.ctp">Index</a>
                            </li>
                            <li>
                                <a href="#">Contact</a>
                            </li>
                            <li>
                                <a href="#">About me</a>
                            </li>
                            <li class="has-dropdown">
                                <a href="#">Sign up</a>
                                <ul class="dropdown">
                                    <li>
                                        <a href="#">Log in</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="small-12 columns panel">
                <p>This is a panel.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

你可以删除课程＆＃34;修复＆＃34;从你的第三排（如果你不需要一个固定的顶部杆），或者如果你想保持顶栏固定，可以在第二个（面板）行（与顶栏相同的高度）添加margin-top。

当一个元素是位置固定的（如绝对和浮动）时，它实际上并不在页面上，因为静态元素与它不相关。所以你的面板锚定在页面顶部，因为它上面没有任何块。我正在简化它，但我希望有所帮助。

基础网格系统：我做错了什么？

1 个答案: