Question

在设计应用程序时，我正在尝试使用最佳实践，所以我不会在寻求一些建议的情况下一起“黑客”。

我在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>

结果是这样的：

Extra Large Format

Extra Small Format

如上所述，我希望Extra Small格式不再显示按钮（因为它们会垂直堆叠并且很乱），但是我已经读到Bootstrap Display Utility并不是最好的选择，因为它加倍了代码等？

关于如何实现这一目标的任何想法？

Bootstrap Grid Layout在超小而不是多个按钮上显示ComboBox

0 个答案: