如何在移动视图中更改 Bootstrap 导航栏父菜单项图标的位置？

Question

I am looking for a way to change the position of the bootstrap navigation menu bar parent menu icon, when open in mobile view.我正在寻找一种在移动视图中打开时更改引导导航菜单栏父菜单图标位置的方法。

Currently the menu header contains right-arrow-down icon at the end of header name like below.目前，菜单标题在标题名称的末尾包含右箭头向下图标，如下所示。

My requirement is to convert the highlighted right-arrow-down icon to left-arrow icon and change the icon position to start of parent header menu text and also to change the background color (gray) of parent menu item on mouse hover like below.我的要求是将突出显示的右下箭头图标转换为左箭头图标，并将图标位置更改为父标题菜单文本的开头，并在鼠标悬停时更改父菜单项的背景颜色（灰色），如下所示。

below is the navigation menu bar HTML code:下面是导航菜单栏 HTML 代码：

<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
    <li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;">
        <label class="label d-md-block d-lg-none">Welcome, abc</label>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACCOUNTS</a>
        <div class="dropdown-menu">
            <a class="dropdown-item"><span class="k-icon k-i-plus"></span>New Prospect</a>
            <a class="dropdown-item">Accounts</a>
            <a class="dropdown-item">Prospects</a>
            <a class="dropdown-item">Account Reports</a>
            <a class="dropdown-item">My Account Reports</a>
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTACTS</a>
        <div class="dropdown-menu">
            <a class="dropdown-item">Item 1</a>
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LEADS</a>
        <div class="dropdown-menu">         
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OPPORTUNITIES</a>
        <div class="dropdown-menu">
            <a class="dropdown-item">Item 1</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ACTIVITIES</a>
        <div class="dropdown-menu">
            <a class="dropdown-item">Item 1</a>
        </div>
    </li>
</ul>
</div>

It might required to override the existing bootstrap classes to acheive this but I am not sure which class will work for me.它可能需要重写现有的自举类来达致这可是我不知道哪个类会为我工作。 I have tried to look for the ways to acheive this using Bootstrap CSS online but not found any example similar to my requirement.我曾试图寻找到达致这使用CSS引导方式在线，但没有发现类似我要求任何例子。 Appreciate your help.感谢你的帮助。

Update: here is the mockup drop down of the modules from pressing the hamburger button in mobile view -更新：这是在移动视图中按下汉堡按钮后模块的模型下拉列表 -

this would be the layout once one of the modules is selected (Opportunities is the module in this example) -一旦选择了其中一个模块，这将是布局（本例中的机会是模块）-

Desktop View:桌面视图：

Answer 1

You can use font awesome icons like suggested below and create the similar effect you want.您可以使用如下建议的字体真棒图标并创建您想要的类似效果。 Bootstrap creates the triangle icon using border property on the after element of the toggable anchor. Bootstrap 使用可切换锚点的 after 元素上的边框属性创建三角形图标。 Remove that style by adding border: 0 none;通过添加border: 0 none;删除该样式border: 0 none; and add the following styles to .dropdown-toggle并将以下样式添加到.dropdown-toggle

  .nav-item.dropdown {
    position: relative;
  }
  #navbarSupportedContent .dropdown-toggle::after,
  #navbarSupportedContent .dropdown-toggle::before {
    font: normal normal normal 14px/1 FontAwesome;
    vertical-align: baseline;
    font-size: 20px;
    padding-right: 5px;
  }
  #navbarSupportedContent .dropdown-toggle[aria-expanded="false"]::after {
    content: "\f105";
    position: absolute;
    right: 10px;
  }
  #navbarSupportedContent .dropdown-toggle[aria-expanded="true"]::before {
    content: "\f104";
  }
  #navbarSupportedContent .dropdown-toggle::after {
    border: 0 none;
  }

 @media only screen and (max-width: 992px) { .nav-item.dropdown { position: relative; } #navbarSupportedContent .dropdown-toggle::after, #navbarSupportedContent .dropdown-toggle::before { font: normal normal normal 14px/1 FontAwesome; vertical-align: baseline; font-size: 20px; padding-right: 5px; } #navbarSupportedContent .dropdown-toggle[aria-expanded="false"]::after { content: "\\f105"; position: absolute; right: 10px; } #navbarSupportedContent .dropdown-toggle[aria-expanded="true"]::before { content: "\\f104"; } #navbarSupportedContent .dropdown-toggle::after { border: 0 none; } .navbar-light #navbarSupportedContent .navbar-nav .nav-link:hover { background-color: #ccc; color: white; padding-left: 5px; border-radius: 5px; } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.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> <script src="https://use.fontawesome.com/b71241fd62.js"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav"> <li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;"> <label class="label d-md-block d-lg-none">Welcome, abc</label> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACCOUNTS</a> <div class="dropdown-menu"> <a class="dropdown-item"><span class="k-icon ki-plus"></span>New Prospect</a> <a class="dropdown-item">Accounts</a> <a class="dropdown-item">Prospects</a> <a class="dropdown-item">Account Reports</a> <a class="dropdown-item">My Account Reports</a> <a class="dropdown-item"><span class="k-icon ki-star"></span> Favorites</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTACTS</a> <div class="dropdown-menu"> <a class="dropdown-item">Item 1</a> <a class="dropdown-item"><span class="k-icon ki-star"></span> Favorites</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LEADS</a> <div class="dropdown-menu"> <a class="dropdown-item"><span class="k-icon ki-star"></span> Favorites</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OPPORTUNITIES</a> <div class="dropdown-menu"> <a class="dropdown-item">Item 1</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ACTIVITIES</a> <div class="dropdown-menu"> <a class="dropdown-item">Item 1</a> </div> </li> </ul> </div>

Answer 2

i have example for you this is help for you我有你的例子，这对你有帮助

<nav id="sidebar" class="sidebar-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-menu">
        <ul>
          <li class="sidebar-dropdown">
            <a href="#">

              <p id="demo">Dashboard</p>
            </a>
            <div class="sidebar-submenu">
              <ul>
                <li>
                  <a href="#">Dashboard 1
                  </a>
                </li>
                <li>
                  <a href="#">Dashboard 2</a>
                </li>
                <li>
                  <a href="#">Dashboard 3</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!-- sidebar-menu  -->
    </div>

  </nav>

css css

          @keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sonar {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
body {
  font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/

.page-wrapper {
  height: 100vh;
}

.page-wrapper .theme {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 4px;
  margin: 2px;
}

.page-wrapper .theme.chiller-theme {
  background: #1e2229;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
  left: 0px;
}

@media screen and (min-width: 768px) {
  .page-wrapper.toggled .page-content {
    padding-left: 300px;
  }
}
/*--------------sidebar-wrapper----------------*/

.sidebar-wrapper {
  width: 260px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: -300px;
  z-index: 999;
}

.sidebar-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-wrapper a {
  text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
  max-height: calc(100% - 30px);
  height: calc(100% - 30px);
  overflow-y: auto;
  position: relative;
}

.sidebar-content.desktop {
  overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.sidebar-wrapper .sidebar-brand > a {
  text-transform: uppercase;
  font-weight: bold;
  flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
  cursor: pointer;
  font-size: 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
  padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
  font-weight: bold;
  font-size: 14px;
  padding: 15px 20px 5px 20px;
  display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  position: relative;
  padding: 8px 30px 8px 20px;
}

.sidebar-wrapper .sidebar-menu ul li a i {
  margin-right: 10px;
  font-size: 12px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;

}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  left: 10px;
  top: 14px;
  transform: rotate(180deg);
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 5px 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
  padding-left: 25px;
  font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 8px;

}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
  float: right;
  margin-top: 8px;
  margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
  float: right;
  margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
  display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  left: 10px;
}



/*-----------------------------chiller-theme-------------------------------------------------*/

.chiller-theme .sidebar-wrapper {
    background: #31353D;
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #3a3f48;
    background-color : #171717;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu .active {
    border-top: 1px solid #3a3f48;
    background-color : #fff;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand>a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
    color: #818896;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
.chiller-theme .sidebar-footer>a:hover i {
    color: #b8bfce;
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
    color: #bdbdbd;
}

.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
    color: #16c7ff;
    text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    background: #3a3f48;

}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: #6c7b88;
}

.chiller-theme .sidebar-footer {
    background: #3a3f48;
    box-shadow: 0px -1px 5px #282c33;
    border-top: 1px solid #464a52;
}

.chiller-theme .sidebar-footer>a:first-child {
    border-left: none;
}

.chiller-theme .sidebar-footer>a:last-child {
    border-right: none;
}

js js

 var span = document.getElementById("deom"); 
        jQuery(function ($) {

    $(".sidebar-dropdown > a").click(function() {
  $(".sidebar-submenu").slideUp(200);
  if (
    $(this)
      .parent()
      .hasClass("active")
  ) {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .parent()
      .removeClass("active");
  } else {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .next(".sidebar-submenu")
      .slideDown(200);


    $(this)
      .parent()
      .addClass("active");
  }
});

$("#close-sidebar").click(function() {
  $(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
  $(".page-wrapper").addClass("toggled");
});




});

you can change color using this css您可以使用此 css 更改颜色

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #3a3f48;
    background-color : #171717;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu .active {
    border-top: 1px solid #3a3f48;
    background-color : #fff;
}

and you can edit arrow using this css您可以编辑箭头使用这个CSS

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  left: 10px;
  top: 14px;
  transform: rotate(180deg);
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  left: 10px;
}

you can change text using dom event in js您可以在 js 中使用 dom 事件更改文本

ex:- https://codepen.io/tharinduvindula/pen/zYxMQxo例如：- https://codepen.io/tharinduvindula/pen/zYxMQxo

Answer 3

I think you dont have to write that much of a code to do this single change.我认为您不必编写那么多代码来完成这个单一的更改。 Few steps to follow要遵循的几个步骤

1) Remove the dropdown-toggle class as this is the commander behind the down arrow to appear. 1）删除下拉切换类，因为这是出现在向下箭头后面的指挥官。

2) Add fontawesome cdn or anything else for the arrow icons or you can use html unicode 2）为箭头图标添加 fontawesome cdn 或其他任何东西，或者您可以使用 html unicode

3) Add appropriate fontawesome just inside the dropdown button or anything else, you can also use image icon. 3）在下拉按钮或其他任何东西中添加适当的fontawesome，您也可以使用图像图标。

4) For color change if you use fontawesome of anyother font base icon you can change the color or the icon too as like color:"anything" and to change the background color just target the button id or class and write background-color:"anythung"!important; 4）对于颜色更改，如果您使用任何其他字体基础图标的 fontawesome，您也可以更改颜色或图标，例如 color:"anything" 并更改背景颜色只需针对按钮 id 或 class 并写入 background-color:"任何东西”！重要的；

Example Code ::示例代码 ::

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <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://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hello, world!</title>
</head>

<body>

    <div class="dropdown">
        <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-angle-left mr-1"></i> Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
</body>

</html>

Hope this help!希望这有帮助！ Thanks.谢谢。

如何在移动视图中更改 Bootstrap 导航栏父菜单项图标的位置？

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-01-21 06:46:33

解决方案2
0 2020-01-21 05:01:28

解决方案3
0 2020-01-21 06:05:50

如何在移动视图中更改 Bootstrap 导航栏父菜单项图标的位置？

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-01-21 06:46:33

解决方案2 0 2020-01-21 05:01:28

解决方案3 0 2020-01-21 06:05:50

解决方案1
2 已采纳 2020-01-21 06:46:33

解决方案2
0 2020-01-21 05:01:28

解决方案3
0 2020-01-21 06:05:50