Bootstrap： <a>標簽內</a> <li> <a>不能按預期工作</a>
[英]Bootstrap: <a> tag inside <li> doesn't work as expected
問題描述
我嘗試將“ a”標簽粘貼到“ li”中。 但是我不明白為什么標簽上沒有指針光標並且href屬性不能像往常一樣工作，什么bootstrap屬性可以鎖定它？ li標簽的填充不足嗎？ 還是我做錯了什么？ 使用引導程序類來改善它的更好方法是什么？ 任何幫助將不勝感激。
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>
3 個解決方案
解決方案1
4 已采納 2017-11-22 11:46:12
這是由於div具有“ agileheader-topbar”類覆蓋菜單所致。 使用下面的代碼。
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right" style="z-index: 1;">
解決方案2
0 2017-11-22 11:48:30
回答：
.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>
解決方案3
0 2017-11-22 12:00:31
您的導航位於另一個div元素下，因此當您在導航項中輸入鼠標時，它實際上並未懸停，而是已懸停在另一個div元素（.agileheader-topbar）中。 所以你試試這個CSS
.agileheader-topbar {
width: 40; /*or is your needed */
}
Carousel（Twitter Bootstrap）+ retina.js無法正常工作
[英]Carousel (Twitter Bootstrap) + retina.js doesn't work as expected
li a：帶有Django變量的nth-child無法按預期工作
[英]li a:nth-child with variable from Django doesn't work as expected
垂直對齊標簽li的項目？ （我也嘗試過“顯示：表格單元格”，但不起作用）
[英]Vertical-align for item of tag li? (i tried also “display: table-cell” but doesn't work)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.