正确使用 Bootstrap justify-content-between 和 stack-to-horizontal col答案

【问题标题】：Use Bootstrap's justify-content-between and stack-to-horizontal col properly正确使用 Bootstrap justify-content-between 和 stack-to-horizontal col
【发布时间】：2021-01-12 10:55:43
【问题描述】：

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

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

我希望按钮的放置方式：

它应该开始放置在输入字段的下方和开头。（想象一下 col-8 下的 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 内row] 的5 个按钮？

一个请求：我想提出一个建议——不要过多地涉及使用边距和内边距，因为这应该适用于所有屏幕尺寸。

【问题讨论】：

标签： html css bootstrap-4 responsive-design frontend

【解决方案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 下，而 row 包裹在里面。

【讨论】：

0 值在 margin 和 padding 中的单位是多余的。正确的形式是：margin: 0、padding: 0。我强烈建议使用 IDE，因为大多数体面的 IDE 会提供开箱即用的语法提示，无需任何额外配置。此外，应避免使用内联样式（它们会破坏响应能力，因为没有技术方法可以在内联样式中使用 @media 查询）。

【解决方案2】：

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

这里是错误的细分：

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

作为替代解决方案，我已将最后一个 .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>

【讨论】：