html - 如何为垂直堆叠的按钮放置滚动条？

Question

我在一个网站上工作，我想在其中为垂直堆积的按钮放置一个滚动条。

这是 fiddle为了它。

我用来制作一个按钮的 html 代码是:

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
  </div>
</div>

问题陈述:

我想知道如何将所有按钮放在滚动条内。这是我尝试过的方法，但它似乎不起作用。

.dropdowns
{
height: 200px;
overflow-y: auto;
}

我正在关注这个tutorial为了让它发挥作用。

Answer 1

<div>
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
</div>

<style>
div {
    overflow-y: auto;
    width: 100%;
 }
 button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid lightblue;
    border-radius: 5px;
 }
 </style>

上面的代码应该可以工作。您可以添加您想要的任何 Bootstrap 类以实现自定义外观。