Question

请告诉我为什么下拉菜单无效并且搜索框中没有显示搜索图标。

下拉菜单未折叠。并且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;
    }
}

Answer 1

对于搜索问题，您需要将input-group-addon置于内部

<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中下拉课程代替你能试一下吗

CSS下拉菜单和图标问题

1 个答案: