Inline-Logo und Firmenname in Navbar

Question

Ich bin Anfänger in ASP.NET MVC und in Standard-Projektvorlage Ich versuche, ein Logo in Navbar mit dem Firmennamen hinzuzufügen, habe ich erfolgreich Logo mit Firmennamen hinzugefügt. Aber, Logo und Firmenname sind nicht in der gleichen Zeile. Ich versuche es zu inline zu bringen. Ich habe viel Zeit verbracht, aber ich konnte keine Lösung finden. Meine Ausgabe & Code ist unten angegeben.

Ausgang:

Code:

<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> 

Bitte sagen Sie mir, wie kann ich es inline?

Answer 1

Sie müssen nur die Höhe und den oberen Rand der Navigationsleiste ändern.

Ich fügte Ihrem Aktionslink einen Klassennamen companyName hinzu und fügte css margin-top hinzu. Gleich margin-top Wert für navbar-nav Klasse zu.

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

änderte ich das Logo Höhe 50.

Hinweis: Ich mit einem anderen Logo-Bild überprüft. Ich denke, das ist etwas größer als deine Logogröße. Deshalb habe ich die Höhe auf 50 geändert, aber Sie können es nach Belieben beibehalten, dann müssen Sie den oberen Randwert für companyName und navbar-nav entsprechend einstellen. Dann setzen Sie height = auto auf Anker-Tag, wie unten.

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

Ich habe diesen Code getestet. Arbeiten wie erwartet. Hoffe es hilft :)