导航栏中的内嵌徽标和公司名称答案

【问题标题】：Inline logo and company name in navbar导航栏中的内嵌徽标和公司名称
【发布时间】：2017-04-08 18:07:55
【问题描述】：

我是 ASP.NET MVC 的初学者，在默认项目模板中，我尝试在 navbar 中添加带有公司名称的徽标，我已成功添加带有公司名称的徽标。但是，标志和公司名称不在同一行。我正在尝试内联它。我花了很多时间，但我找不到解决方案。我的输出和代码如下。

输出：

代码：

<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>
                <a href="/Home/Index" class="navbar-brand"> <img src="~/Content/images/logo.png" alt="Company logo" height="100"/> </a>
                @Html.ActionLink("Contact Lenses", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

请告诉我，我怎样才能内联它？

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

你只需要改变导航栏的高度和顶部边距。

我在你的 Action 链接中添加了一个类名 companyName 并添加了 css margin-top。 navbar-nav 类的 margin-top 值也相同。

@Html.ActionLink("Contact Lenses", "Index", "Home", new { area = "" }, new { 
            @class = "navbar-brand companyName"})
.companyName, .navbar-nav{
  margin-top: 15px !important;
 }

我将徽标高度更改为 50。

注意：我检查了其他一些徽标图像。我认为这比您的徽标尺寸大一点。这就是我将高度更改为 50 的原因，但您可以按照自己的意愿保留它，然后您需要相应地设置 companyName 和 navbar-nav 的 margin-top 值。然后将height = auto 设置为锚标记，如下所示。

<a href="/Home/Index" class="navbar-brand myLogo"> 
  <img src="~/Content/images/logo.png" alt="Company logo" height="50"/> 
</a>
.myLogo{
  height:auto;
 }

我测试了这段代码。按预期工作。希望对你有帮助:)

【讨论】：