html - 导航栏覆盖 Logo

标签 html css asp.net-mvc asp.net-mvc-3

我是 CSS 的新手,有一个我似乎无法弄清楚的问题。所以我刚刚启动了一个 MVC 应用程序,我试图在导航菜单栏上 float 一个 Logo 。我将 Logo 放到了我想要的位置,但现在的问题是导航菜单覆盖了 Logo 的上半部分。无论如何,我可以选择将 Logo 放在栏的顶部吗?

这是我的 _Layout.cshtml 的样子:

<body>
    <div style="position: absolute; margin-top: -50px;">
        <img src="~/Content/Images/IsabellasLogo.png" />   
    </div>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Mission", "Mission", "Home")</li>
                    <li>@Html.ActionLink("Menu", "Menu", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy Isabellas's Pizzeria</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

最佳答案

您的导航栏设置为具有 navbar-fixed-top 类,它可能定义了 position:fixed;。尝试将其更改为 position:relative;。您可能还需要调整边距,但在没有看到实际 CSS 的情况下很难判断。

另一种选择是保持 position:fixed; 不变,但将 top:0 调整为更大的值,例如 top:50px; .

关于html - 导航栏覆盖 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25088558/

相关文章:

javascript - AJAX 调用并在单击时设置事件类

javascript - 如何正确使用 Angular-Material Tooltips 切换方法?

node.js - 如何更改/输入 Passport.js 'username' 和 'password' 之外的不同属性

html - 导航栏右侧的折叠按钮在左侧显示链接

asp.net-mvc - 在 ASP.Net MVC 路由中,如何路由 2 个看起来相同但类型不同的不同路径?

javascript - .Net MVC 将 ViewBag 值分配给 JavaScript 脚本变量问题

javascript - IE 7 中表大小为 0

javascript - 使 Div 的宽度尽可能小

javascript - 为不同的浏览器窗口大小选择不同的CSS样式表?

C# Web 应用程序 -> 代理所有请求 -> 从另一个 Web 应用程序返回内容(反向代理)