正确使用 Bootstrap 的 justify-content-between 和 stack-to-horizontal 列

Question

我正在设计响应式表单。我的表单有 1 个标签、1 个输入字段和 5 个按钮。

我的按钮和输入字段都在 col-8 下。

我希望按以下方式放置按钮：

它应该在输入字段的下方和开头开始放置。（想象一下 col-8 下的 2 行）
Space 2 个按钮之间是相等的。
在小屏幕上，按钮将显示为堆栈。

下面是我想要的截图：

For normal screens

When small screens - it should be stacked

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container bg-dark col-6" style="margin-top: 2rem;">
      <form>
        <div class="form-group row">
          <label for="id" class="col-4 col-form-label" style="color: white;">id</label>
          <div class="col-8">
            <input id="id" name="id" type="text" class="form-control">
          </div>
        </div>
        <div class="offset-4 form-group row justify-content-between">
          <button type="button" class="btn btn-primary">A</button>
          <button type="button" class="btn btn-warning">B</button>
          <button type="button" class="btn btn-primary">C</button>
          <button type="button" class="btn btn-danger">D</button>
          <button type="button" class="btn btn-info">E</button>
        </div>
        <div class="offset-4 form-group row">
          <div class="col-sm">
            <button type="button" class="btn btn-primary">A</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-warning">B</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-primary">C</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-danger">D</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
        <div class="offset-4 form-group row justify-content-between">
          <div class="col-sm">
            <button type="button" class="btn btn-primary">A</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-warning">B</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-primary">C</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-danger">D</button>
          </div>
          <div class="col-sm">
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

我试了 3 次来放置 5 个按钮。

首先 - 只有 row 和 justify-content-between
然后 - row 和 col
最后 - row、col 和 justify-content-between

但它们中的每一个要么跨越输入字段宽度（第一个屏幕截图），要么与输入字段宽度保持间隙（第二个屏幕截图）。

我怎样才能正确地制作出同时满足justify-content-between和堆叠[col inside row]的5个按钮？

请求：我想提一个建议 - 不要过度使用边距和填充，因为这在所有屏幕尺寸下都应该很好。

Answer 1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- CSS only -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <!-- JS, Popper.js, and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container bg-dark col-6" style="margin-top: 2rem;">
    <form>
      <div class="form-group row">
        <label for="id" class="col-4 col-form-label" style="color: white;">id</label>
        <div class="col-8">
          <input id="id" name="id" type="text" class="form-control">
        </div>
      </div>
      <div class="row">
        <div class="offset-4 col-8">
          <div class="row justify-content-between" style="margin: 0%; padding: 0%;">
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-primary">A</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-success">B</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-warning">C</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-danger">D</button>
            </div>
            <div class="col-auto" style="margin: 0%; padding: 0%;">
              <button name="button" type="button" class="btn btn-primary">E</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

我想提一些对我有用的事情：

我必须为 col-auto 每次制作 margin: 0% 和 padding: 0%，如果我不这样做，就会像我的屏幕截图那样创建一个间隙。
我必须将每个 button 放入 col-auto，然后将每个 col-auto 放入 row。最后，我制作了 justify-content-between 行，当然还有 margin: 0% 和 padding: 0% 用于删除不必要的空白。
最后我把整个东西都包裹在 offset-4 col-8 下，offset-4 col-8 包裹在 row 下。

Answer 2

您的标记有一些问题。为避免将来出现这些情况，请阅读 Bootstrap 网格部分的 How it works 部分下的每个点（要点）。

这里是错误的细分：

并非所有 .row 都是 .container 或 .col 的直系子代。因为 .row 有负边距，它需要父级有水平 "gutter" paddings 来补偿负边距（或者你可以通过应用 [=禁用装订线 mx-0 或 no-gutters classes).
您在 .row 上应用了 .offset-4，这是为 .col 设计的。这很重要，因为将它应用于 .row 会使该行中的所有列错位。
要使用 .justify-content-between，您不一定需要另一层 .row + .col。你所需要的只是元素上的 display: flex，可以用 d-flex class.

作为替代解决方案，我已将上一个 .row 示例更改为使用 .btn-group，这是针对此类操作栏布局的稍微更好的 UI 解决方案。自定义 CSS 主要用于在移动设备上将其切换为垂直（也可以通过对其应用 .btn-group-vertical 来实现，但它不支持响应式变体）。
看到它工作：

.custom-btn-group {
  width: 100%;
}

@media(max-width: 767px) {
  .custom-btn-group,
  .vertical-mobile {
    flex-direction: column;
  }
  .custom-btn-group:not(#_) .btn {
    margin-left: 0;
  }
  .custom-btn-group:not(#_) .btn:first-child {
    border-top-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
  .custom-btn-group:not(#_) .btn:last-child {
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <form class="bg-dark col-sm-6 py-3">
      <div class="form-group row">
        <label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
        <div class="col-sm-9 col-md-8">
          <input id="id" name="id" type="text" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <div class="col offset-sm-3 offset-md-4">
          <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-primary">A</button>
            <button type="button" class="btn btn-warning">B</button>
            <button type="button" class="btn btn-primary">C</button>
            <button type="button" class="btn btn-danger">D</button>
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col offset-sm-3 offset-md-4">
          <div class="d-flex justify-content-between vertical-mobile">
            <button type="button" class="btn btn-primary">A</button>
            <button type="button" class="btn btn-warning">B</button>
            <button type="button" class="btn btn-primary">C</button>
            <button type="button" class="btn btn-danger">D</button>
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col offset-sm-3 offset-md-4">
          <div class="btn-group custom-btn-group">
            <button type="button" class="btn btn-primary">A</button>
            <button type="button" class="btn btn-warning">B</button>
            <button type="button" class="btn btn-primary">C</button>
            <button type="button" class="btn btn-danger">D</button>
            <button type="button" class="btn btn-info">E</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

正确使用 Bootstrap 的 justify-content-between 和 stack-to-horizontal 列

Use Bootstrap's justify-content-between and stack-to-horizontal col properly

html

css

frontend

responsive-design

bootstrap-4

正确使用 Bootstrap 的 justify-content-between 和 stack-to-horizo​​ntal 列

Use Bootstrap's justify-content-between and stack-to-horizontal col properly

html

css

frontend

responsive-design

bootstrap-4

正确使用 Bootstrap 的 justify-content-between 和 stack-to-horizontal 列