如何在bootstrap4中向右移動導航鏈接？
[英]How to move nav-link to the right in bootstrap4?
問題描述
請問怎么把nav-link移到右邊？ 因為我像 float: right 或 margin left:auto 一樣嘗試它，它會將漢堡菜單帶到中間。 我想要漢堡菜單和導航鏈接都在右側。 此外，當我將屏幕最小化時，漢堡菜單和導航鏈接很好，它們在右側，而當我將屏幕最小化時，導航鏈接在左側。 此外，當我將屏幕最小化時，我單擊下拉菜單，導航欄變大，下拉菜單位於導航欄內，導航欄變大。 我想要導航欄外的下拉菜單。 我嘗試使用位置：固定，位置：相對和絕對位置，它沒有修復它。 所以想問一下有沒有什么解決辦法。 所以，我可以解決它。 謝謝你。
這是我的代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--Icon--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <title>Admin Dashboard</title> <style> /* * Sidebar */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; /* Behind the navbar */ padding: 48px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } @media (max-width: 767.98px) { .sidebar { top: 5rem; } } .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 48px); padding-top: .5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } @supports ((position: -webkit-sticky) or (position: sticky)) { .sidebar-sticky { position: -webkit-sticky; position: sticky; } } .sidebar .nav-link { font-weight: 500; color: #333; } .sidebar .nav-link.active { color: #021B4D; } .sidebar .nav-link:hover { color: #FFDB1A !important; } /*Navbar*/ .navbar{ background-color:#021B4D !important; } .navbar-brand { padding-top: .75rem; padding-bottom: .75rem; font-size: 1rem; margin-left:20px; } .white-text{ color:#fff; } .dropdown-menu a:hover{ background-color:#021B4D; color:#fff; } </style> </head> <body> <nav class=" navbar navbar-expand-lg sticky-top "> <a class="navbar-brand" href=""> <img src="eGrocery_SDP(Logo).jpeg" width="50" height="40"> </a> <button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data- target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin- left:auto;"><span class="white-text"><i class="fas fa-bars fa-1x"></i></span></button> <ul class="navbar-nav " > <li class="nav-item dropdown " > <a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a href="#" class="dropdown-item">Account</a> <div class="dropdown-divider"></div> <a href="#"class="dropdown-item">Logout</a> </div> </li> </ul> </nav> <div class="container-fluid"> <div class="row"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div class="sidebar-sticky pt-5"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#"> <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file"></span> Products </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="shopping-cart"></span> Orders </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="users"></span> Manage Customers </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="bar-chart-2"></span> Manage Staff </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="layers"></span> Sales Reports </a> </li> </ul> </div> </nav> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2020-09-30 13:06:41
為了始終將用戶圖標固定在右側，我添加了以下 css：
a.nav-link.dropdown-toggle{
text-align: right;
}
然后在大屏幕上，為了讓你的ul始終在右邊，我添加了 BS4 類ml-lg-auto ，它將在 lg 斷點上的屏幕左側添加邊距 au。
為了讓 hambuger 右對齊，將類ml-left添加到您的按鈕。
如果您想在小屏幕和大屏幕中具有相同的下拉效果，我添加了 css 如下：
@media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
a.nav-link.dropdown-toggle{ text-align: right; } @media (max-width: 991px){ .user-dropdown-menu{ position: absolute !important; left: -6rem !important; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--Icon--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <title>Admin Dashboard</title> <style> /* * Sidebar */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; /* Behind the navbar */ padding: 48px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } @media (max-width: 767.98px) { .sidebar { top: 5rem; } } .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 48px); padding-top: .5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } @supports ((position: -webkit-sticky) or (position: sticky)) { .sidebar-sticky { position: -webkit-sticky; position: sticky; } } .sidebar .nav-link { font-weight: 500; color: #333; } .sidebar .nav-link.active { color: #021B4D; } .sidebar .nav-link:hover { color: #FFDB1A !important; } /*Navbar*/ .navbar{ background-color:#021B4D !important; } .navbar-brand { padding-top: .75rem; padding-bottom: .75rem; font-size: 1rem; margin-left:20px; } .white-text{ color:#fff; } .dropdown-menu a:hover{ background-color:#021B4D; color:#fff; } </style> </head> <body> <nav class=" navbar navbar-expand-lg sticky-top "> <a class="navbar-brand" href=""> <img src="eGrocery_SDP(Logo).jpeg" width="50" height="40"> </a> <button class=" navbar-toggler navbar-toggler-right ml-auto" type="button" data-toggle="collapse" data- target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin- left:auto;"><span class="white-text"><i class="fas fa-bars fa-1x"></i></span></button> <ul class="navbar-nav ml-lg-auto" > <li class="nav-item dropdown " > <a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a> <div class="dropdown-menu user-dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a href="#" class="dropdown-item">Account</a> <div class="dropdown-divider"></div> <a href="#"class="dropdown-item">Logout</a> </div> </li> </ul> </nav> <div class="container-fluid"> <div class="row"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div class="sidebar-sticky pt-5"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#"> <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file"></span> Products </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="shopping-cart"></span> Orders </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="users"></span> Manage Customers </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="bar-chart-2"></span> Manage Staff </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="layers"></span> Sales Reports </a> </li> </ul> </div> </nav> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
Bootstrap 4 導航欄 - 在香草 JS 中單擊導航鏈接時折疊
[英]Bootstrap 4 navbar - collapse on nav-link click in vanilla JS
Bootstrap nav-link類在Chrome中不起作用，但在Firefox中起作用，導航到相應部分
[英]Bootstrap nav-link class is not working in Chrome, but works in Firefox, navigates to corresponding section
Bootstrap JS 動態選項卡-每個導航鏈接更改相同的元素
[英]Bootstrap JS dynamic tabs- every nav-link change the same element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Bootstrap 4-突出顯示活動的nav-item / nav-link
刪除引導導航鏈接 hover 背景顏色
在 html jquery 中激活和停用導航鏈接引導程序？
Bootstrap 4 導航欄 - 在香草 JS 中單擊導航鏈接時折疊
bootstrap5 導航鏈接不是藍色，也不是懸停
切換活動導航鏈接
如何使用 jquery 激活“禁用導航鏈接”？
Bootstrap nav-link類在Chrome中不起作用，但在Firefox中起作用，導航到相應部分
Bootstrap JS 動態選項卡-每個導航鏈接更改相同的元素
Bootstrap：選擇下拉項目時導航鏈接不會隱藏
相關標簽