在 Bootstrap 导航栏中安装 SVG 徽标，右侧带有品牌文本

Question

我试图让我的 svg 徽标漂浮在导航栏左侧，然后是品牌文字（“Oishii”）旁边（不是下方），然后是右侧的链接。 我需要它们全部对齐并垂直居中。

我为徽标部分找到了this question，但由于我的徽标是 svg，因此我必须将其放在 div 中，否则它会溢出，我还希望它旁边有文字。 我知道从技术上讲，我可以只用其中的文字制作一个 svg，但我更喜欢真实的文字，因为我听说您应该尽量减少徽标中的实际文字（可选择、可搜索等）。

.navbar {
    border: 0;
    z-index: 9999;
    letter-spacing: 4px;

}

.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}
.navbar .nav > li > a {
  line-height: 50px;
}

.navbar-header h1 {
    letter-spacing: 1px;
    color: black !important;
    font-family: 'Lobster Two', cursive;
}

.navbar li a, .navbar {
    color: black !important;
    font-size: 12px;
    transition: all 0.6s 0s;
}

.navbar-toggle {
    background-color: transparent !important;
    border: 0;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: red !important;
}

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </button>
            <div class"navbar-left"><img src="oishiilogo.svg"></div>
            <h1 class="brand brand-name navbar-left">Oishii</h1>
        </div>
        <div class="collapse navbar-collapse navbar-right" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#intro">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Menu</a></li>
                <li><a href="#contact">Reserve</a></li>
            </ul>
        </div>
    </div>
</nav>

我也为你们提供了我的代码on CodePen。谢谢！

Answer 1

将.logo类添加到包裹图片的div中，然后添加这个css

.logo {
    display: block;
    height: auto;
    width: 52px;
    padding-top: 5px;
    margin-right: 15px;
}

对于移动视图，您必须使用媒体查询并将徽标和品牌名称更改为 display: inline-block; 并添加边距等