Html 引导网格布局在额外的小按钮上显示组合框，而不是多个按钮

在设计我的应用程序时，我正在尝试使用最佳实践，因此，我需要一些建议来开始，而不是将一些东西“拼凑”在一起

我在Angular应用程序中使用Bootstrap 4.1.3

基本上，我希望我的应用程序在超大屏幕（即桌面）上显示许多（8+）按钮，但在超大屏幕（即移动屏幕）上，我不希望按钮只是垂直显示。我想在较小的格式，能够取代一个下拉按钮，以便于使用

这是我的起始代码：

<div class="container">
  <div class="row">
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 1</button>
    </div>
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 2</button>
    </div>
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 3</button>
    </div>
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 4</button>
    </div>
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 5</button>
    </div>
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 6</button>
    </div>
    <div class="col">
      <button class="btn btn-danger" type="button">Test Button 7</button>
    </div>
  </div>
</div>

测试按钮1
测试按钮2
测试按钮3
测试按钮4
测试按钮5
测试按钮6
测试按钮7

结果如下：

如上所述，我希望超小的格式不再显示按钮（因为它们会垂直堆叠，而且很凌乱），但我已经读到使用引导显示工具不是最好的，因为代码会加倍等等

---

关于如何实现这一点，您有什么想法吗？

也许您可以使用navbar collapse？那你就不需要重复代码了。我的页面上已经有导航栏了。我确实想过使用它，但我还是觉得它有点傻，肯定有更好的方法。除了在代码上加倍外，使用display还有什么主要问题吗？如果您对Navbar应用一些自定义样式（在桌面上列出样式为按钮的项目），Navbar将为您带来80%的帮助。我们采用了您提到的快捷方式，在手机上显示

select

元素，在桌面上显示按钮。除了你自己指出的以外，我想不出你不应该这样做的理由。如果它解决了您的问题，请使用显示器切换。