javascript - Bootstrap 4 : Is there a way to nest a bootstrap "btn-toolbar" in order to make it x-axis scrollable on smaller screens?

Question

我正在使用 bootstrap 的“btn-toolbar”类在同一行放置几个“btn-group”类下拉按钮。我希望 btn-toolbar div 有一个固定的，这样它就可以在较小的屏幕上在 x 轴上滚动，所以我需要一个父 div 来容纳“btn-toolbar”，以使其成为 ovreflow-x : 滚动，并让 btn-toolbar 在屏幕外保持宽度。

问题 是，在父 div 就位的情况下，下拉菜单部分隐藏在父 div 后面。当我删除父 div(以及 x 轴滚动的能力)时，它工作得很好。它也可以直接在其下使用 div。有没有一种方法可以操纵关联的元素，以便我可以保留父 div？

非常感谢任何想法!

我已经尝试更改所有关联 div 的 z-index 以及与下拉列表关联的动态类。

<div class="wrapper">
  <div class="btn-toolbar" role="toolbar">
     <div class="btn-group">
        <button class="btn btn-outline-primary dropdown-toggle" 
           type="button" id="dropdownMenuButton" data- 
           toggle="dropdown" aria-haspopup="true" aria- 
           expanded="false">
                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>
</div>

.wrapper {
    width: 100%;
    overflow-x: scroll;
    border-bottom: solid 1px #ccc;
}

.wrapper::-webkit-scrollbar { 
    display: none; 
} 

.btn-toolbar{
    min-width: 1000px;
}

.btn-toolbar button {
    padding: 2px 8px;
    margin: 8px 5px;
    color: #1eafed;
    border-color: #1eafed;
}

我原以为下拉菜单会在展开时显示，但它们似乎隐藏在 wrapper div(只有大约 50 像素高)的底部后面。

Answer 1

打开的下拉菜单具有属性“position:absolute”，这意味着它将遵循其父类的范围...并且在父类 wrapper 中您定义了 overflow -x: 滚动;;

为了解决这个问题，我们必须覆盖这个 position:absolute 属性，我们使用这个:

.wrapper > .btn-toolbar > .show > .show { position:fixed !important;     left: auto !important; }

完整的下面的工作片段:

.wrapper {
  width: 100%;
  overflow-x: scroll;
  border-bottom: solid 1px #ccc;
}

.wrapper::-webkit-scrollbar {
  display: none;
}

.btn-toolbar {
  min-width: 1000px;
}

.btn-toolbar button {
  padding: 2px 8px;
  margin: 8px 5px;
  color: #1eafed;
  border-color: #1eafed;
}

.wrapper>.btn-toolbar>.show>.show {
  position: fixed !important;
  left: auto !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="wrapper">
  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
      <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
                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>
    <div class="btn-group">
      <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
                Dropdown button #2
         </button>
      <div class="dropdown-menu" aria- labelledby="dropdownMenuButton2">
        <a class="dropdown-item" href="#">2 - Action</a>
        <a class="dropdown-item" href="#">2 - Another action</a>
        <a class="dropdown-item" href="#">2 - Something else here</a>
      </div>
    </div>
  </div>
</div>