Bootstrap：<li> 内的 <a> 标签没有按预期工作

Question

我尝试将 "a" 标签粘贴到 "li" 中。但是我不明白为什么标签上没有指针光标并且 href 属性不起作用，因为 usual.What bootstrap 属性锁定它？ li 标签的 paddings 不够？或者我做错了什么？使用 bootstrap 类改进它的更好方法是什么？任何帮助将不胜感激。

body {
  margin: 0;
  padding: 0;
  font-family: "Arial, Helvetica, sans-serif,";
  font-size: 12px;
  font-weight: normal;
}

.header {
  background-color: #222222;
  height: 114px;
}
ul {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: "MyradProRegular";
  font-size: 14px;
  text-transform: capitalize;
}

.input-group {
  display: flex;
}

.container-fluid {
  height: 100px;
}

.navbar {
  width: 37%;
  margin-bottom: 0 !important;
  min-height: 0px !important;
}

.search-panel-block {
  width: 40%;
}

img {
  max-width: 100%;
}

.menu-items__item {
  list-style-type: none;
}

.search-panel {
  padding-top: 34px;
}
.nofloat {
  float: none;
}
.agileheader-topbar-grid {
  margin-left: auto;
}

.nav > li > a {
  position: static;
  padding: 0;
}

.btn {
  width: 65px;
  background-color: #f10e34;
  border-color: #f10e34;
}

.glyphicon-search {
  color: #ffffff;
}

<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
          integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
          integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
          crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
  <div class="container-fluid">
    <div class="menu-logo">
      <img src="logo.jpg" alt="market-logo.jpg">
    </div>
    <nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
      <ul class="menu-items nav">
        <li class="menu-items__item"><a href="#" class="menu-items__link nav-link">My account</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Wishlist</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">My Cart</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Checkout</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Login</a></li>
      </ul>
    </nav>
    <div class="agileheader-topbar">
      <div class="container">
        <div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
          <form class="search-panel">
            <div class="input-group add-on">
              <input class="form-control" name="srch-term" type="text" placeholder="Search">
              <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>
</body>
</html>

Answer 1

这是由于 div 和 "agileheader-topbar" class 覆盖了菜单。使用下面的代码。

<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right" style="z-index: 1;">

Answer 2

答案：

.navbar {
  z-index: 1;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Arial, Helvetica, sans-serif,";
  font-size: 12px;
  font-weight: normal;
}

.header {
  background-color: #222222;
  height: 114px;
}
ul {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-family: "MyradProRegular";
  font-size: 14px;
  text-transform: capitalize;
}

.input-group {
  display: flex;
}

.container-fluid {
  height: 100px;
}

.navbar {
  width: 37%;
  z-index: 1;
  margin-bottom: 0 !important;
  min-height: 0px !important;
}

<!doctype html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
          integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
          integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
          crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
  <div class="container-fluid">
    <div class="menu-logo">
      <img src="logo.jpg" alt="market-logo.jpg">
    </div>
    <nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
      <ul class="menu-items nav">
        <li class="menu-items__item"><a href="#" class="menu-items__link nav-link">My account</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Wishlist</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">My Cart</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Checkout</a></li>
        <li class="menu-items__item nav-link"><a href="#" class="menu-items__link">Login</a></li>
      </ul>
    </nav>
    <div class="agileheader-topbar">
      <div class="container">
        <div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
          <form class="search-panel">
            <div class="input-group add-on">
              <input class="form-control" name="srch-term" type="text" placeholder="Search">
              <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>
</body>
</html>

Answer 3

你的导航在另一个 div 元素下，所以当你在导航项中输入鼠标时，它实际上并没有悬停，它已经悬停在另一个 div 元素（.agileheader-topbar）中。所以你试试这个 CSS

.agileheader-topbar { 
   width: 40; /*or is your needed */
}

Bootstrap：<li> 内的 <a> 标签没有按预期工作

Bootstrap: <a> tag inside <li> doesn't work as expected

html

css

twitter-bootstrap

twitter-bootstrap-4