在行列中创建内联表单

Question

我正在尝试学习引导网格，并想创建一行包含两列的行：一列宽，一列不那么宽。在左列中，我想放置一个内联表单，在右较窄的列中，我将放置另一个带有按钮的表单。我复制了一行 2 列的 Bootstrap 示例，然后复制了 Bootstrap 内联表单代码并将其粘贴到其中一列中，但当我运行代码时它不是内联的。这是我到目前为止的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="MyContainer">
  <div class="row">
    <div class="col-6">
      <form class="form-inline">
        <label class="sr-only" for="inlineFormInputName2">Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

        <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
        <div class="input-group mb-2 mr-sm-2">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
        </div>

        <div class="form-check mb-2 mr-sm-2">
          <input class="form-check-input" type="checkbox" id="inlineFormCheck">
          <label class="form-check-label" for="inlineFormCheck">
              Remember me
            </label>
        </div>

        <button type="submit" class="btn btn-primary mb-2">Submit</button>
      </form>
    </div>
    <div class="col-6">
      One of two columns
    </div>
  </div>
</div>

表单控件不是内联的，而是一个堆叠在另一个之上。

有人能看出我哪里出了问题吗？

Answer 1

您正在使用旧版本 Bootstrap 中的类，但您使用的是 Bootstrap 5.1。我做了一些改变： 首先，它是 .visually-hidden，不再是 .sr-only。其次，不再支持 .form-inline ，因此我将该类更改为 row 并将 .col-3 类添加到表单的子级中。我还更改了两列的类，正如您所说，您希望其中一个比另一个更宽。我不知道您使用 Bootstrap 的哪些资源，但我建议您参考官方文档。

[email protected]/dist/css/bootstrap.min.css">

  

    

      

        

          Name
          
        

        

          Username
          
        

        

          
          
            Remember me
          
        

        Submit
      
    
    

      One of two columns