Bootstrap网格格式化列宽

Question

对于一个具有良好自举知识的人来说，这可能是一个简单的问题，但是我很沮丧。

我在页面顶部有一个“搜索栏”，它是一个输入和一个按钮，然后在下面有4个空格的行，所以我最终得到了一个搜索栏，它横跨顶部和底部的整个宽度。然后具有某些内容的div就会分为3列。

我的问题是，顶部的搜索栏比三个4列块宽一些。有谁知道如何以响应方式将搜索栏限制为仅与三个div块一样宽？我尝试仅更改宽度，但这仅适用于较大的介质尺寸。我需要一个引导解决方案。

这不是确切的实现，因为它实际上是一个React项目，并且某些内容是动态生成的，但是它是一个引导问题，因此我省略了React的东西。

这是模式代码：

 <div class="fluid-container">
    <div class="row flex-xl-nowrap">
      <div class="col-12 col-lg-9 py-md-3 pl-md-5 bd-content" role="main">

          <div class="row">
            <div class="col-md-12">
               <div class="input-group mb-3">
                 <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                 <div class="input-group-append">
                   <button class="btn btn-outline-secondary" type="button">Button</button>
                 </div>
               </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
               * some content *
            </div>
            <div class="col-md-4">
               * some content *
            </div>
            <div class="col-md-4">
               * some content *
            </div>
          </div>
      </div>
    </div>
  </div>

欢迎任何建议

Answer 1

在最外面的div中，当您确实要具有引导程序类=“ container-fluid”时，就使用了class =“ fluid-container”，这可能会引起一些问题，因为您的行应位于容器类中。您可能还会发现，将搜索栏和三列都用class =“ container-fluid”或class =“ container”包裹在同一个div中，以使它们具有相同的宽度很有用。