Bootstrap -更改可见性时一组复选框的布局间距换行

Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网页和Web应用程序的工具和组件。在Bootstrap中，更改可见性时一组复选框的布局间距换行可以通过使用Bootstrap的Grid系统和CSS类来实现。

首先，我们可以使用Bootstrap的Grid系统来创建一个包含复选框的行。Grid系统将页面水平划分为12个列，我们可以使用这些列来布局我们的复选框。例如，我们可以使用以下代码创建一个包含3个复选框的行：

<div class="row">
  <div class="col-md-4">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">复选框1</label>
  </div>
  <div class="col-md-4">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">复选框2</label>
  </div>
  <div class="col-md-4">
    <input type="checkbox" id="checkbox3">
    <label for="checkbox3">复选框3</label>
  </div>
</div>

在上面的代码中，我们使用row类创建了一个行，并在行内使用col-md-4类将每个复选框包装在一个占据4个列的容器中。这样，每个复选框都会占据页面的1/3宽度。

如果我们想要在更改可见性时使复选框换行，我们可以使用Bootstrap的CSS类来实现。例如，我们可以使用d-md-block类来在中等屏幕大小及以上显示复选框，并使用d-md-none类在中等屏幕大小及以下隐藏复选框。这样，当屏幕尺寸较小时，复选框将自动换行。

下面是示例代码：

<div class="row">
  <div class="col-md-4 d-md-block d-md-none">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">复选框1</label>
  </div>
  <div class="col-md-4 d-md-block d-md-none">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">复选框2</label>
  </div>
  <div class="col-md-4 d-md-block d-md-none">
    <input type="checkbox" id="checkbox3">
    <label for="checkbox3">复选框3</label>
  </div>
</div>

在上面的代码中，我们在每个复选框的容器上添加了d-md-block d-md-none类。这样，当屏幕尺寸较小时，复选框将隐藏，当屏幕尺寸较大时，复选框将显示，并且会自动换行。

推荐的腾讯云相关产品和产品介绍链接地址：