修订

Question

使用Foundation 4，我决定让我网站的导航栏变得粘稠。按照我发现的一些例子，我将我的部分包装在一个并给它“固定”和“包含到网格”的类。固定标签导致向导航栏添加底部填充等于边距应该是什么。当我使用chrome或firefox检查员时，我找不到负责这样做的css。我已经为css添加了一个新行来设置最大高度。做到这一点最终消除了用于抵消身体内容的边缘。我觉得我不应该添加这个新的CSS规则。有没有人经历过这个，你是如何解决它的？

<div class="contain-to-grid fixed">
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title Area -->
            <li class="name">
                <h1><a href="/" style="background-image: url(/Content/logos/logo_color_105x35.png); text-indent: -119988px; width: 105px; background-repeat: no-repeat; background-position: 50% 50%;">company</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <!-- Left Nav Section -->

            <!-- Right Nav Section -->
            <ul class="right">
                <li class="divider hide-for-small"></li>
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "RegisterLink" })</li>
                <li class="divider hide-for-small"></li>
                <li>@Html.ActionLink("Sign in", "SignIn", "Account", routeValues: null, htmlAttributes: new { id = "SignInLink" })</li>
            </ul>
        </section>
    </nav>
</div>

新的CSS规则我添加了     .contain到grid.fixed {
        最大高度：45像素;
    }

小提琴 http://jsfiddle.net/Emh8P/6/

Answer 1

我把你的html扔进了一个js bin。

看起来CSS负责人是顶部栏元素的边缘底部。 <nav class="top-bar">

如果您要将固定类放在导航而不是您的包含类上，它会将其修复到页面顶部，而不会出现任何我能看到的问题。

<div class="contain-to-grid">
    <nav class="top-bar fixed">

这是一个jsbin，我把固定在顶部栏而不是包含到网格。 http://jsbin.com/ehekEBE/1/

如果这对您不起作用，您只需要摆脱与顶栏相关联的margin-bottom:1.875em。

修订

在查看您发布的新jsfiddle后，我看到了您所看到的行为。当你打开导航菜单时，基金会正在做的是将固定类从父元素移动到子元素。当发生这种情况时，导航器本身的位置会因为不再固定而失去其粘性，也会渲染与导航器内部相关联的边缘。

如果您使导航同时拥有position:fixed !important;和top:0 !important;，那么它将保持固定在屏幕顶部，并且不会以任何可见的方式更改边距。

希望有所帮助。

http://jsbin.com/IGArABO/2/

在导航包装中使用固定的包含网格可以增加额外的高度

1 个答案:

修订