Question

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
       <a class="navbar-brand wrapText" href="#stage"><span><img src="img/icon.png" width="24px"/>&nbsp;SCOTTIESCOTSMAN</span></a>
            <button class="navbar-toggle" data-toggle ="collapse" data-target = "mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
       <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#project">PROJECTS</a>
                </li>              
                <li class="nav-item">
                    <a class="nav-link" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

如何垂直对齐logo.png和文字...我的图标栏不起作用，因为点击时不显示任何菜单。对不起新手：）

Answer 1

如果您希望图片成为文字的背景，您可以将图片设置为.navbar品牌的背景，然后在css中设置尺寸，如下所示：

.navbar-brand{
  background:url('http://placehold.it/25x25');
  background-position:center;
  background-repeat:no-repeat;
  background-size: 24px 24px;
}

这是一个小提琴，可以在行动Fiddle Demo

中向您展示

如果您希望文字和图片看起来像是在同一条线上，就像图片大于文字一样，请为图片添加线条高度，如下所示：

.navbar-brand img{
  width:24px;
  line-height:50px;
  display:inline-block;
}

这是Fiddle Demo

的小提琴

此外，您在导航栏中缺少一个div，您应该将navbar-brand和响应按钮包含在名为navbar-header的div中。然后，要让您的菜单在您的按钮中打开您的数据目标，请阅读#mainNavbar您错过了＃。您的导航栏应如下所示：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
     <div class="navbar-header">
       <a class="navbar-brand" href="#stage">SCOTTIESCOTSMAN</a>
            <button class="navbar-toggle" data-toggle ="collapse" data-target = "#mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
       </div>
       <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#project">PROJECTS</a>
                </li>              
                <li class="nav-item">
                    <a class="nav-link" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 2

在徽标图片类上试用vertical-align: middle？

如何垂直对齐logo.png和文本

2 个答案: