html - Bootstrap Navbar-Brand 作为下拉菜单

Question

你好，我正在开发我们 web 应用程序的主页，我想知道如何在 Bootstrap 中修复(或任何可用的解决方案，如果可以的话)我的这段代码CSS。

1.) 我正在开发导航栏，我希望导航栏品牌成为下拉菜单。嗯，是的，我实现了它，(见下图)但如您所见，它没有对齐到导航栏。如何在 bootstrap.css 中对齐它？

2.) 此外，我放置了一个图像 Logo ，我想在它悬停并单击时用品牌突出显示。我要向 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.) 您可以为 Logo 使用 CSS 背景图像，并在 :hover 上交换图像。以特定字体导入图像有点太多恕我直言。这是一个简单的例子，说明如何做到这一点:Example CSS hover .它应该是不言自明的。