Bootstrap4-行未占用全部空间

问题描述

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

我知道，例如两行，但是通过这种方式，我能够重现该问题。

我实际上是在.col-md-6类中左右移动的，它在snap上显示为正确，但是在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似乎有问题。当我删除所有这些文件后，它按预期工作。

解决方法

我认为，这是因为您要将flexbox放入flexbox（“ input-group”类在默认情况下也设置为flex和“ row”类）。如果我们只删除“ display：flex;” “输入组”中的属性正常工作。实际上，请注意，左行也不会占用整个宽度-几乎是100％，但不相等。默认情况下，“行”类没有任何width属性，因此宽度计数是否可能基于子元素？

我认为这不是最好的解释，但是这是非常有趣的行为，如果有人通过完全了解此Flexbox的运行情况来更好地解决此问题，那就太好了。

编辑：

还使用“ flex-direction：column;”对“ input-group”类进行样式设置。帮助。之后，“行”显示为宽度为100％的一列-而不将其视为flexbox行中的潜在列之一。

bootstrap-4 grid-system html