Bootstrap 4 分区'；使用d-inline的s显示在两行上

我试图在一行上显示两个或三个div，但它们总是出现在两行上。这是我的，代码如下。这两段代码是相同的，只是第二段使用了两个div，因为我认为这可能会有所不同，但事实并非如此。如何使用row/col在Bootstrap4的一行中实现所有这些

    <div class="row justify-content-center"> 
      <div class="col-3 d-inline-block">Title</div>     
      <form>
        <div class="col-2 d-inline-block">Search
           <input type="text" name="search">
        </div>
      </form>
    </div>     
     
    <div class="row justify-content-center"> 
      <div class="col-3 d-inline-block">Title</div>     
      <form>
        <div class="col-2 d-inline-block">Search</div>
        <div class="col d-inline-block"><input type="text" name="search"></div>
      </form>
     </div>    

标题
搜寻
标题
搜寻

引导行（

.row

）和列（

.col-*

）是使用flex box构建的。列必须是行的直接子行，才能生效。事实上，您有一个包装搜索标签的

，输入打破了这一点

如果要制作内联表单，有一个类

。form inline

用于此目的：

对于内联表单，可以尝试以下布局：

标题
搜寻

• .align items center

  ：将行中的项目垂直居中，这是可选的

• .form inline

  ：将表单内联，这是必需的

• .mr-2

  ：在搜索标签上放置右边距，以便表单与表单之间有间隙（可选）

---

演示：

效果非常好。我很感谢你提到垂直中心，因为我在另一段代码中对此进行了讨论。非常感谢。