使 btn-group 响应答案

【问题标题】：make btn-group responsive使 btn-group 响应
【发布时间】：2018-08-16 23:59:31
【问题描述】：

我有一个很长的按钮列表，我需要对它们进行分组，但也要很好地显示它们。而现在，该设计并没有分成几行。我有引导程序 4

<div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="checkbox" name="bla" id="2" autocomplete="off" value="2" > bla bla
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" name="bla2" id="2" autocomplete="off" value="2" > bla bla
          </label>
... (and so on)

谢谢

【问题讨论】：

标签： css bootstrap-4 responsive

【解决方案1】：

将 .flex-wrap 类添加到您的按钮组容器中。

<div class="btn-group flex-wrap" data-toggle="buttons">

【讨论】：

【解决方案2】：

如果像我一样，你不一定需要按钮在一个组中，你也可以使用 btn-toolbar 类，它定义了 flex-wrap: wrap 默认情况下。

<div class="btn-toolbar" data-toggle="buttons">

【讨论】：

【解决方案3】：

你不需要引导程序，你可以使用它，适用于三个按钮，附言你可能会发现我复制了一些额外的 CSS b/c - 从另一个代码中粘贴了这个另外，这是我创建的第一批东西之一，所以命名可能不是很好，无论如何，希望这会有所帮助！

body {
  overflow-x: hidden;
}
.button {
  border: 1.2vh groove rgb(200, 200, 200);
  margin: 1.5vh 1vw;
  width: 28vw;
  font-size: 2vw;
  transition: all 1s ease-in-out;
}

#laptop {
  float: left;
  width: 65%;
}

#tablet {
  float: left;
  width: 50%;
}

@media only screen and (orientation: landscape) {
  .button,
  #instructions {
    font-size: 2vh;
  }
}

@media only screen and (max-width: 1160px) {
  #laptop {
    float: none;
    width: 100%;
  }
  #tablet {
    float: left;
    width: 50%;
  }
  .button {
    width: 45vw;
    font-size: 4vw;
  }
}

@media only screen and (max-width: 485px) {
  #laptop {
    width: calc(95vw - 32px);
  }
  #tablet {
    float: none;
    width: calc(95vw - 32px);
  }
  .button {
    width: calc(95vw - 32px);
    font-size: 4vw;
  }
}

<div id="laptop">
  <button type="button" id="b1" class="button" onclick="">Click to</button>
  <div id="tablet">
    <button type="button" id="b2" class="button" onclick=""> Click to</button>
  </div>
</div>
<button type="button" id="b3" class="button" onclick=""> Click to</button>

【讨论】：