Question

如何使用overflow-y: visible对overflow-x: scroll进行编码？

按钮的数量可以变化，并且当按钮太多时，它们会水平滚动。如果单击下拉菜单按钮，那么我想在overflow-y: visible中创建div。但是现在，下拉列表隐藏在div中。

如何更改？

我的代码部分

html

  <div class="container-fluid fill-height">
      <div class="navbar navbar-expand scroll" role="group">
        <div class="dropdown">
          <button type="button" class="btn btn-default dropdown-toggle" id="testDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
          <div class="dropdown-menu" aria-labelledby="testDropdown">
            <a class="dropdown-item" href="#">Menu</a>
          </div>
        </div>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
      </div>
    </div>

css

.scroll {
  overflow-x: scroll;
  overflow-y: visible;
}

Codepen live sample here

Answer 1

最后一件事：

来自引导程序官方文档（http://getbootstrap.com/components/#dropdowns-alignment）：可能需要其他定位下拉列表是通过CSS在文档的正常流程中自动定位的。这意味着下拉菜单可能会被具有某些溢出属性的父级裁剪或出现在视口范围之外。在出现这些问题时自行解决。

https://github.com/davidstutz/bootstrap-multiselect/issues/411
https://www.bootply.com/YvePJTDzI0

如何在div中使用溢出-x滚动显示溢出-y？

1 个答案: