Bootstrap4 - 行不占用全部空间答案

【问题标题】：Bootstrap4 - row does not take full spaceBootstrap4 - 行不占用全部空间
【发布时间】：2021-01-21 01:54:59
【问题描述】：

为什么右侧没有占据我屏幕的整个宽度？

我知道这可以做得更好，例如两行，但这样我就能重现问题。

我实际上在使用 .col-md-6 类时有左右，它在 Firefox 和 Chromium 上的机器上显示正确，但在我的机器上显示是错误的。

如果出现这种情况，我也已经尝试过删除缓存。

感谢任何提示。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-12">
      <div id="left_1">left:
        <div id="left_2" class="input-group">
          <div class="row">
            <div class="col-4">
              <div class="form-group">
                <label for="left_col_1">Left col 1</label>
                <input type="text" class="form-control" id="left_col_1">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label for="left_col_2">Left col 2</label>
                <input type="number" class="form-control" id="left_col_2">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label for="left_col_3">Left col 3</label>
                <input type="text" class="form-control" id="left_col_3">
              </div>
            </div>
            <div class="col-2 input-group-append float-right">
              <button id="left_button" class="btn btn-danger" type="button">X</button>
            </div>
          </div>
        </div>
      </div>
      <button id="left_button_2" type="button" class="btn btn-outline-primary">Add left</button>
    </div>
    <div class="col-12">
      <div id="right_1">right:
        <div id="right_2" class="input-group">
          <div class="row">
            <div class="col-10">
              <div class="form-group">
                <label for="right_col_1">Right col 1</label>
                <input type="text" class="form-control" id="right_col_1">
              </div>
            </div>
            <div class="col-2 input-group-append float-right">
              <button id="right_button" class="btn btn-danger" type="button">X</button></div>
          </div>
        </div>
      </div>
      <button id="right_button_2" type="button" class="btn btn-outline-primary">Add right</button>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>

</html>

编辑：.input-group 和 .input-group-append 似乎有问题。在我将它们全部删除后，它按预期工作。

【问题讨论】：

已解决。请参阅有问题的“编辑：[...]”。

标签： html bootstrap-4 grid-system

【解决方案1】：

我认为，这是因为您将 flexbox 放入 flexbox（“input-group”类默认设置为 flex 和“row”类）。如果我们只删除“display:flex;” “输入组”中的属性，工作正常。事实上，请注意，左行也没有占据全宽 - 它几乎是 100%，但不相等。 “Row”类默认没有任何宽度属性，所以宽度计数可能以某种方式基于子元素？

我认为这不是最好的解释，但这是非常有趣的行为，如果有人能更好地解决这个问题并充分理解这个弹性盒的情况，那就太好了。

编辑：

还使用“flex-direction: column;”设置“input-group”类的样式有帮助。之后，“行”显示为 100% 宽度的一列 - 如果没有它，它只会被视为 flexbox 行中的潜在列之一。

【讨论】：