Div's using d-inline 出现在两行

Question

我试图在一行中显示两个或三个 div，但它们总是显示在两行中。这是我的 jsfiddle，代码如下。这两个代码块是相同的，除了第二个代码块使用两个 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>

Answer 1

Bootstrap 行 (.row) 和列 (.col-*) 是用弹性框构建的。列必须是行的直接子级才能生效。事实上，你有一个 <form /> 包装搜索标签和输入打破了这一点。

如果你想制作一个内联表格，有一个 class .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/

Div's using d-inline 出现在两行

Div's using d-inline appear on two rows

bootstrap-4

inline

col