Question

我有固定的引导程序标题，现在我希望将徽标放在左上角的标题上方。我有这个当前的代码，它放置相同的标题行。但是我想把它放在标题的顶部。并且它应该与标题一样可滚动

<div id="navbar">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-inner">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-logo">
                <img src="Images/Logo.jpg" alt="Test" height="60" width="140" />
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a ui-sref="about">Home</a></li>
                    <li><a ui-sref="route1">Home</a></li>
                <li><a ui-sref="route2">Blog</a></li>
                    <li><a href="#">Referrals</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
</div>



.navbar-logo
{
float:left
}

Answer 1

  <div id="navbar">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-inner">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                     <div class="navbar-logo">
                <img src="http://www.spzabnica.pl/wp-content/uploads/2018/02/logo.png" alt="Test" height="60" width="140" />
            </div>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">

                    <li><a menu ui-sref="about">Home<img src="http://www.spzabnica.pl/wp-content/uploads/2018/02/logo.png" class="top" height="25" width=auto /></a></li>
                    <li><a ui-sref="route1">Home</a></li>
                <li><a ui-sref="route2">Blog</a></li>
                    <li><a href="#">Referrals</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
</div>

样式

.navbar-logo
{
float:left
}
body { 
    padding-top: 65px; 
}
.menu {
  position: relative;
}

.top {
    position: absolute;
    top: 0;
    right: 0;
}

如何在标题上方左上角制作徽标并固定

1 个答案: