Bootstrap Navbar-Brand作为下拉菜单

Question

您好我正在开发我们的webapp的主页，我想知道如何修复（或任何可用的解决方法，如果您可能）我的这个代码在我的引导程序中CSS。

1。）我正在使用导航栏，我希望导航栏品牌成为下拉菜单。好吧，是的，我实现了它，（见下图），但正如你所看到的，它不是 ALIGNED 到导航栏。你如何在bootstrap.css中对齐它？

2。）另外，我放置了一个图像标识，我希望在悬停并点击时用品牌突出显示它。我在CSS中添加了哪些更改？或者更好的是，我该怎么做？我应该a。）将图像导入到特定字体的字符中，或b。）我只是对bootstrap.css添加一些更改，使图像/字形突出显示？

或者任何形式的援助或帮助都可以，甚至是解决方法。非常感谢，谢谢。 ：d

---

HTML源代码

<div class="navbar navbar-inverse navbar-fixed-top" id="Header" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a href="#" class="navbar-brand dropdown" data-toggle="dropdown"><p><img src="pictures/logo.png" id="HeaderLogo" height="25" width="15"> Home <span class="caret"></span></p></a>
                  <ul class="dropdown-menu" id="BrandDropdown" role="menu">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                    <li class="divider" id="DropdownDivider"></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="navbar-collapse collapse">
              <form class="navbar-form navbar-right" role="form">
                <div class="input-group">
                  <input type="text" class="form-control" id="SearchBar">
                  <span class="input-group-addon" id="SearchToggle"><a href="#"><span class="glyphicon glyphicon-search" id="SearchLogo"></span></span></a>
                </div>
              </form>
            </div>
          </div>

CSS来源代码

#Header {
  background: rgba(255, 255, 255, 0); 
  border: 0px;
}

#HeaderLogo {
  opacity:0.5;
}

#BrandDropdown {
  background: rgba(0, 0, 0, 0); 
  border: none; 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0); 
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); 
  position: left;
}

#DropdownDivider {
  background-color: rgba(0, 0, 0, 0.3); 
  margin: 10px 12px;
}

#SearchBar {
  background-color: rgba(0,0,0,0.2); 
  border: none;
}

#SearchToggle {
  background-color: rgba(0,0,0,0.2); 
  border: none;
}

#SearchLogo {
  color: white; 
  opacity: 0.5;
}

Answer 1

1。）要对齐导航，只需添加

#BrandDropdown {
  margin-left: -15px;
}

到你的CSS。您可以更改该值，直到获得所需内容。 Working Example

2。）您可以使用CSS背景图片作为徽标，并在:hover上交换图像。以特定字体导入图像有点太多了。以下是如何执行此操作的简单示例：Example CSS hover。它应该是自我解释。