0

我有一个使用 Bootstrap 4 构建的响应式网站。我有一个下拉按钮，单击该按钮会显示一个下拉菜单。在我的手机 (iPhone XR) 中测试下拉菜单时，下拉菜单显示在网站顶部，而不是应有的下拉按钮正下方。

/* DESKTOP */


/* Searchbar Container */

.searchbar-container {
  background-color: white;
  padding: 15px 10px;
}

.square-btn-left,
.square-btn-right {
  background-color: #8ABE57;
  color: white;
  height: 45px;
  width: 50px
}

.searchbar-field {
  height: 45px;
  border: 2px solid #eee;
  border-left: none;
  border-right: none;
}

.category-dropdown-menu {
  padding: 0.35rem 1.5rem;
  height: 500px;
  overflow-y: scroll;
}

.category-dropdown-menu li a {
  color: #31353C;
  line-height: 2em;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn dropdown-toggle square-btn-left" data-toggle="dropdown" id="serviceCategorySearchDropdown">
                            <i class="far fa-list-ul"></i>
                          </button>
    <ul class="dropdown-menu category-dropdown-menu" role="menu">
      <li><a href="#"><i class="fas fa-shovel pr-3"></i>Item 1</a></li>
      <li><a href="#"><i class="fas fa-utensils pr-3"></i>Item 2</a></li>
      <li><a href="#"><i class="fas fa-ruler-triangle pr-3"></i>Item 3</a></li>

    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">
</div>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

4

1 回答 1

0

原因是当按钮单击时ul class="dropdown-menu category-dropdown-menu"获得内联样式。它也得到show类。

为了覆盖样式属性，您可以：

.dropdown-menu.category-dropdown-menu.show { top: 3em!important; }

这是一个片段：

根据评论编辑：

由于内联样式是从其中一个插件生成的，因此您可以将其删除（然后似乎您根本不​​需要 css）。我把它戴上，setInterval这样它就会最后开火。

$('#serviceCategorySearchDropdown').on('click', function () {
   setInterval(function(){ 
     $('.dropdown-menu.category-dropdown-menu.show').removeAttr('style');
   }, 50);  
})
.dropdown-menu.category-dropdown-menu.show {
  /*top: 3em!important;*/
}






/* DESKTOP */


/* Searchbar Container */

.searchbar-container {
  background-color: white;
  padding: 15px 10px;
}

.square-btn-left,
.square-btn-right {
  background-color: #8ABE57;
  color: white;
  height: 45px;
  width: 50px
}

.searchbar-field {
  height: 45px;
  border: 2px solid #eee;
  border-left: none;
  border-right: none;
}

.category-dropdown-menu {
  padding: 0.35rem 1.5rem;
  height: 500px;
  overflow-y: scroll;
}

.category-dropdown-menu li a {
  color: #31353C;
  line-height: 2em;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn dropdown-toggle square-btn-left" data-toggle="dropdown"   id="serviceCategorySearchDropdown">
                            <i class="far fa-list-ul"></i>
                          </button>
    <ul class="dropdown-menu category-dropdown-menu" role="menu"data-placement="top-end">
      <li><a href="#"><i class="fas fa-shovel pr-3"></i>Item 1</a></li>
      <li><a href="#"><i class="fas fa-utensils pr-3"></i>Item 2</a></li>
      <li><a href="#"><i class="fas fa-ruler-triangle pr-3"></i>Item 3</a></li>

    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">
</div>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

顺便说一下3em，根据引导.btn类大小计算...根据需要更改它。

于 2020-11-16T21:35:41.540 回答