Bootstrap菜单在移动版本上设置插入符号切换

Question

我是Bootstrap的新手，并试图创建一个带子菜单的菜单，该菜单应该适用于桌面版和移动版。

<div class="collapse navbar-collapse navbar-ex1-collapse">
 <ul class="nav navbar-nav">
  <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="parentlink"><b class="caret"></b></a>
  <div class="dropdown-menu">
     <ul>
       <li><a href="link1"></a></li>
       <li><a href="link2"></a></li>
       <li><a href="link3"></a></li>
    </ul>
  </div>
 </ul>
</div>

和css for caret

.navbar .nav li.dropdown.open>.dropdown-toggle .caret {
    border-top-color: transparent;
    border-bottom: 4px solid #000000;
    position: relative;
    top: -3px;
}

@media (min-width: 767px) {
  .navbar-nav .caret {
  display:none;
 }

 .dropdown:hover .dropdown-menu {
   display: block;
  }
}

父链接可以展开并在点击时显示子菜单。我想要做的是在移动版本上创建一个可以点击的父链接，然后点击插入符号打开/关闭它。有什么想法吗？