css - Bootstrap 在导航栏中添加 Logo

Question

例如，在这个导航栏中:

    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Brand</a>
        </div>
    </nav>

如何添加公司标志？ Bootstrap 的类太多了，我不知道什么是最好的方法。我应该只在 anchor 中添加一个 img 标签吗？是否有用于添加图像(带 Sprite )的特定类？

Answer 1

您可以使用此代码添加您的 Logo ，将您的图像路径放在给定的代码中 希望对你有帮助

`<div class="menu-xs visible-xs navbar-inverse">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="sr-only">The Logo</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <button class="navbar-toggle glyphicon glyphicon-search pull-right search" data-toggle="collapse" data-target="#navbarSearch">&nbsp;
    </button>

</div>

//below is menu
<div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav visible-xs menu-items">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="myacc.php">My Account</a></li>
                    <li><a href="register_xs.php">Register</a></li>
                </ul>
</div>
   //below is search bar
    <div class="collapse navbar-collapse search-mobile" id="navbarSearch">
                <ul class="nav navbar-nav visible-xs menu-items">
                    <li>
            <form class="form-horizontal" action="mblsearch.php" method="get">
                <label class="label">Search: </label>
                <input type="text" name="title" placeholder="Search..." />&nbsp;&nbsp;
                <button type="submit" class="navbar-toggle search glyphicon glyphicon-search">&nbsp;</button>
            </form>
        </li>
                </ul>
</div>
   //this is your logo
<img class="pull-left logo visible-xs" src="images/logo.png" />`