javascript - 防止 Jquery-UI 在 Bootstrap 导航栏中更改样式

Question

我用 Bootstrap 构建了这个菜单。有一个下拉菜单，里面有一张图片，旁边是一个下拉菜单。在较小的分辨率下，此下拉菜单箭头的形状会变为一个框。我希望它保持箭头的形状。但是，Jquery-ui.js 文件中的某些内容导致它在较小的分辨率下改变形状。如何防止 jquery-ui 影响箭头形状？这是代码，附件是快照

Arrow shape before and after resizing

<nav class="navbar navbar-default ">
<div class="container-fluid"> 
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header" >
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a class="navbar-brand" href="market.html"><img  src="images/logo-inner.jpg"/ alt="B-Hive: Expand your business"></a> </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

    <!-- Form search start -->
    <form class="navbar-form navbar-left" role="search" class="top-search-padding">
    <div class="form-group">
      <div class="search-div ui-widget"  >
        <input id="tags" type="text" class="txt-search" placeholder="Search people, products and services">
        <button type="submit" class="btn-search"><img src="images/search-icon.png"/></button>
      </div>
    </div>
    </form>
    <!-- Form search end -->
    <ul class="nav navbar-nav navbar-right">
      <li class="top-menu-links"><a href="#">MARKET</a></li>
      <li><a class="top-menu-links" href="#">EXHIBITIONS</a></li>
      <li><a class="top-menu-links" href="#">MESSAGES</a></li>
      <li><a class="top-menu-links" href="#">DASHBOARD</a></li>
      <li class="profile-pic-padding"></li>
      <li class="dropdown"> <a href="#"  class="dropdown-toggle custom-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img alt = ""   class=" img-profile-pic img-circle" src="images/profile-pic.fw.png"/> <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Account</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Cart</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Switch Accounts</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Language <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">EN</a></li>
              <li><a href="#">ع</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse --> 
</div>
<!-- /.container-fluid --> 

Answer 1

将 css 设置为 !important，这样就无法覆盖