输入-一行中的组不再在引导v5网格中工作了？

Question

我有一个带有网格的模态窗口，它在bootstrap-4：https://jsfiddle.net/y6xg7823/11/中运行得很好

模态窗口应在一行中显示相邻的两个input-groups。

迁移到bootstrap-5时，网格不再受尊重，输入被简单地放置在彼此下面：https://jsfiddle.net/o2w6cqms/14/为什么？

<div class="modal-body">
   <div class="container-fluid">
      <div class="row row-cols-2">
         <div class="col input-group mb-3">
            <span class="input-group-text" for="test1">Test1</span>
            <input type="text" class="form-control" id="test1">
         </div>
         <div class="col input-group mb-3">
            <span class="input-group-text" for="test2">Test2</span>
            <input type="text" class="form-control" id="test2">
         </div>
      </div>
   </div>
</div>

根据https://getbootstrap.com/docs/5.0/layout/grid/#row-columns，父行上的.row-cols-*只是设置要在布局中呈现的cols数。我不明白为什么它在v5不再起作用了。

Answer 1

如您在下面的图像中所看到的，类输入组将宽度设置为100%，覆盖..row cols-2>*选择器宽度，删除输入组选择器，或将输入组作为div的子组，并使用col选择器。

​

<div class="col">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" for="test1">Test1</span>
              </div>
              <input type="text" class="form-control" id="test1">
            </div>
          </div>
          <div class="col ">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" for="test1">Test2</span>
              </div>
              <input type="text" class="form-control" id="test2">
            </div>
          </div>