Bootsrap Navbar品牌作為下拉菜單

Question

您好，所以我正在開發我們的Web應用程序的主頁，我想知道如何在引導CSS中修復（ 或者，如果可能的話，有任何變通方法 ）我的這段代碼。

1.）我正在開發導航欄，並且我希望導航欄品牌是下拉菜單。 嗯，是的，我實現它，（ 見下圖 ），但你可以看到，它沒有對齊導航欄。 您如何在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。 您可以更改值，直到獲得所需的值。 工作實例

2.）您可以使用CSS背景圖片作為徽標，並在:hover上交換圖片。 以特定字體導入圖像有點不正確。 這是一個簡單的示例： CSS hover示例 。 應該自我解釋。