如何在引导程序 4 中将导航链接向右移动？

【问题标题】：How to move nav-link to the right in bootstrap4?如何在引导程序 4 中将导航链接向右移动？
【发布时间】：2020-09-30 12:42:42
【问题描述】：

请问如何将nav-link移到右边？因为我尝试像浮动：右侧或左侧边距：自动，它会将汉堡菜单引导到中间。我想要汉堡菜单和导航链接都在右侧。此外，当我将屏幕最小化时，汉堡菜单和导航链接很好，它们在右侧，当我将屏幕最小化时，导航链接在左侧。此外，当我将屏幕最小化时，我单击下拉菜单，导航栏变大，下拉菜单位于导航栏内，导致导航栏变大。我想要导航栏外的下拉菜单。我尝试使用位置：固定，位置：相对和绝对位置，它不能解决它。所以想问问有没有什么解决办法。所以，我可以修复它。谢谢。

下面是我的代码：

<!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>

【问题讨论】：

    标签： javascript html css menu navigation


    【解决方案1】：

    为了将用户图标始终固定在右侧，我添加了这个 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>

    【讨论】：

    • 谢谢。但我想问一下如何将汉堡菜单移动到下拉菜单的右边？因为当你最小化它时，汉堡菜单在中间。
    • 还有下拉菜单（小屏最小化），和大屏不一样。
    • @CharlotteChee 对于已完成（已编辑）的汉堡包。您只需在按钮上添加ml-auto。对于您的下拉菜单，您的意思是，您希望它像在大屏幕中一样处于绝对位置？
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-06
    • 2022-01-25
    • 1970-01-01
    • 2018-01-31
    • 1970-01-01
    • 2018-01-19
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode