Question

我有一个很长的按钮列表，我需要对它们进行分组，但也能很好地显示它们。而现在，设计并没有分成几行。我有bootstrap 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)

由于

Answer 1

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

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

Answer 2

你不需要引导程序，你可以使用这个，适用于三个按钮，附注你可能会发现一些额外的 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>

Answer 3

如果像我一样，不一定需要将按钮放在一个组中，则还可以使用btn-toolbar类，该类定义了flex-wrap：默认情况下包装。

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

让btn-group响应

3 个答案: