Bootstrap導航欄僅對圖標做出反應
[英]Bootstrap navbar reacting only to icons
問題描述
我剛剛開始使用webdev，我的導航欄出現問題。 它直接單擊圖標或書寫時才會將您發送到相應的子站點。 我希望它表現得像一個整體的按鈕。 我花了幾個小時搜索網絡，從不同的角度看問題，但我仍然找不到解決方案。 這是導航欄
.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #222; position: fixed; top: 0px; width: 120px; height: 100%; color: #e1ffff; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; } .nav-side-menu .toggle-btn { display: none; background-color: #222; color: #222; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 50px; cursor: pointer; vertical-align: center; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #00ACDD; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #00ACDD; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #00ACDD; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #ffffff; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; text-align: center; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li ai { vertical-align: center; } .nav-side-menu li:hover { border-left: 3px solid #00ACDD; background-color: #000000; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #222; color: #00ACDD; width: 40px; text-align: center; } .brand { text-align: center !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; background: url(graphics/clouds5.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; padding: 0px; overflow-x: hidden; } .navbar-icon { font-size:36px; margin-top:10%; } @media (max-width: 767px) { .topnavbutton-mobile{ padding-left: 0px; border-left: 3px solid #2e353d; border-top: 1px solid #00ACDD; text-align: center; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans"> </head> <div class="nav-side-menu"> <img src="graphics/Icon.png" style="width:40px;padding-top:10px;padding-bottom:10px;display:block;margin-left:auto;margin-right:auto"> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li class="topnavbutton-mobile"> <a href="index.html"> <i class="fa fa-home navbar-icon"></i> <h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6> </a> </li> <li class="topnavbutton-mobile"> <a href="#"> <i class="fa fa-shopping-cart navbar-icon"></i> <h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6> </a> </li> <li class="topnavbutton-mobile"> <a href="signup.html"> <i class="fa fa-user-o navbar-icon"></i> <h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6> </a> </li> <li class="topnavbutton-mobile"> <a href="builder.html"> <i class="fa fa-wrench navbar-icon"></i> <h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6> </a> </li> <li class="topnavbutton-mobile"> <a href="#"> <i class="fa fa-envelope-o navbar-icon"></i> <h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6> </a> </li> </ul> </div> </div>
1 個解決方案
解決方案1
0 2017-05-11 00:34:27
添加display:block到CSS中的<a>標簽或內聯樣式態度。
CSS Bootstrap-將Navbar'Icons'與jumbotron的邊緣對齊
[英]CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.