CSS下拉菜單和圖標問題

請告訴我爲什麼下拉菜單不起作用，並且fa搜索圖標未顯示在搜索框中。CSS下拉菜單和圖標問題

下拉菜單不合攏。因此，http://fortawesome.github.io/Font-Awesome/icon/search/中的搜索圖標不會顯示在搜索框中。

非常感謝您的幫助！

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content="X"> 
    <link rel="icon" href=""> 

    <title></title> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

    <!-- Custom Styles --> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 

    </head> 
    <body> 

<!-- NAVBAR ============================================== --> 

    <div class="navbar-wrapper"> 
    <div class="container"> 
     <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle Navigations</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Home</a> 
      </div> <!-- Ende of Navbar Header --> 
      <div class="navbar-collapse collapse"> 
      <div class="right-inner-addon pull-right"> 
       <i class="fa fa-search"></i> 
       <input type="search" class="form-control" placeholder="search"> 
      </div> <!-- End of Search --> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact Us</a></li> 

       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Community <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li class="dropdown-header">Social</li> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">LinkedIn</a></li> 
        <li><a href="#">Blog</a></li> 
       </ul> 
       </li> 
      </ul> 
      </div> <!-- End of Navbar Collapse --> 
     </div> <!-- Ende of Navbar Container --> 
     </div> <!-- End of Navbar --> 
    </div> <!-- End of Container --> 
    </div> <!-- End of .navbar-wrapper --> 


<script src="Scripts/jquery-1.9.1.min.js"></script> 
<script src="Scripts/bootstrap.min.js"></script> 
    </body> 
</html>

CSS

/* --- Navbar ----------------- */ 

.navbar-wrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 20; 
} 
.navbar-wrapper > .container { 
    padding-right: 0; 
    padding-left: 0; 
} 
.navbar-wrapper .navbar { 
    padding-right: 15px; 
    padding-left: 15px; 
} 
.navbar-wrapper .navbar .container { 
    width: auto; 
} 
.right-inner-addon { 
    position: relative; 
    top: 8px; 
    right: 1px; 
    height: 3px; 
} 
.right-inner-addon input { 
padding-right: 30px; 
} 
.right-inner-addon i { 
    position: absolute; 
    right: 0px; 
    padding: 10px; 
    pointer-event: none; 
} 


/* --- Responsive CSS ----------------- */ 

@media (min-width: 768px) { 

    .navbar-wrapper { 
     margin-top: 20px; 
    } 
    .navbar-wrapper .container{ 
     padding-right: 15px; 
     padding-left: 15px; 
    } 
    .navbar-wrapper .navbar { 
     padding-right: 0; 
     padding-left: 0; 
    } 
    .navbar-wrapper .navbar { 
     border-radius: 4px; 
    } 
}

來源

2015-04-30 snorty_

檢查所有資源正在加載網絡選項卡。還要檢查控制檯是否有錯誤...？ – owaishanif786

對於搜索問題，你需要把輸入組插件裏面，像這樣

<i class="input-group-addon fa fa-search"></i>

或優選引導網站採取

<div class="input-group right-inner-addon pull-right"> 
<div class="input-group-addon"> 
    <i class="input-group-addon fa fa-search"> 
</div> 
<input type="search" class="form-control" placeholder="search"> 
</div> <!-- End of Search -->

對於下拉菜單，我不確定，但我的猜測會是你需要li 而不是下拉班，你可以嘗試

來源

2015-04-30 21:36:32 Tremmillicious

CSS下拉菜單和圖標問題

回答

相關問題