Bootstrap4 - 行未满 space

Question

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

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

我实际上在 class .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 似乎有问题。在我删除所有这些之后，它按预期工作。

Answer 1

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

我不认为这是最好的解释，但这是非常有趣的行为，如果有人能更好地解决这个问题并充分理解这个 flexboxes 是怎么回事，那就太好了。

编辑：

还将“input-group”class 样式设置为“flex-direction: 列；”帮助。之后，“行”显示为宽度为 100% 的一列 - 如果没有，它仅被视为 flexbox 行中的潜在列之一。

Bootstrap4 - 行未满 space

Bootstrap4 - row does not take full space

html

grid-system

bootstrap-4