Div使用d-inline出现在两行中

问题描述

我试图在一行上显示两个或三个div，但它们总是出现在两个上。这是我的jsfiddle，下面是代码。这两个代码块是相同的，除了第二个代码块使用两个div，因为我认为这可能有所不同，但事实并非如此。如何使用行/列在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 />来包装搜索标签并输入的事实打破了这一点。

如果要创建内联表单，则可以使用一个类.form-inline：https://getbootstrap.com/docs/4.5/components/forms/#inline-forms

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

<div class="container">    
    <div class="row justify-content-center align-items-center"> 
        <div class="col-3">Title</div>     
        <form class="form-inline">
            <label for="search" class="mr-2">Search</label>
            <input id="search" type="text" name="search" class="form-control" />
        </form>
    </div>    
</div>

.align-items-center：使行中的项目垂直居中，可选
.form-inline：使表单内联，必填
.mr-2：在搜索标签上添加右页边距，以使表单与其本身之间存在间隙，可选

演示： https://jsfiddle.net/davidliang2008/Lt9fy6wb/11/

bootstrap-4 col inline inline