Bootstrap v4 表单，同一行有 3 个输入 + 按钮答案

【问题标题】：Bootstrap v4 form with 3 inputs + button on the same rowBootstrap v4 表单，同一行有 3 个输入 + 按钮
【发布时间】：2023-03-09 13:00:02
【问题描述】：

我想在同一行上创建具有 3 个输入字段 + 按钮的表单，但我不知道如何制作。
我正在使用 Bootstrap v4 来设计表单。

这是我损坏的设计的图片： Click here

我的代码

<div class="col-sm-7 mx-auto bg-faded">
  <form class="form-inline" action="index.html" method="post">
    <div class="form-group">
      <label class="mr-2" for="">First Name</label>
      <input type="text" name="" value="">
    </div>
    <div class="form-group">
      <label class="mr-2 ml-2" for="">Last Name</label>
      <input type="text" name="" value="">
    </div>
    <div class="form-group">
      <label class="mr-2 ml-2" for="">Nickname</label>
      <input type="text" name="" value="">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

【问题讨论】：

标签： twitter-bootstrap css bootstrap-4 twitter-bootstrap-4

【解决方案1】：

表单的宽度受其容器的限制，所以它是环绕的。如果你想强制它不换行，请使用d-flex flex-nowrap flexbox utils：

     <form class="form-inline d-flex flex-nowrap" action="index.html" method="post">
             <div class="form-group">
                    <label class="mr-2" for="">First Name</label>
                    <input type="text" name="" value="">
              </div>
              <div class="form-group">
                    <label class="mr-2 ml-2" for="">Last Name</label>
                    <input type="text" name="" value="">
              </div>
              <div class="form-group">
                    <label class="mr-2 ml-2" for="">Nickname</label>
                    <input type="text" name="" value="">
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
     </form>

演示：http://www.codeply.com/go/jTDnk5KxGc

【讨论】：