Bootstrap：在一行上创建 3 个输入表单字段并均匀分布，占据页面宽度的一半？

Question

<div class="container">
      <div class="row">
        <form class="inline-form">
          <div class="inline-form">
            <input type="text" placeholder="Your name">
          </div>
          <div class="inline-form">
            <input type="text" placeholder="Email address">
          </div>
          <div class="inline-form">
            <input type="text" placeholder="Phone number">
          </div>
        </form>
      </div>
</div>

我需要在一行上创建 3 个宽度相同的表单域，它们彼此均匀分布。上面的 HTML 在一个 div 里面，它有 .col-md-6 （它应该占据页面宽度的一半）。

Answer 1

您可以将表单类更改为“d-flex flex-row”

或者您可以将所需的输入与另一个 div 像这样包装在同一行中

<div class="container d-flex mx-auto">
      <div class=" row">
        <form class="form-group">
          <div class="d-flex flex-row mb-4">
            <div class="form-control mr-3">
              <input type="text" placeholder="Your name">
            </div>
            <div class="form-control mr-3">
              <input type="text" placeholder="Email address">
            </div>
            <div class="form-control mr-3">
              <input type="text" placeholder="Phone number">
            </div>
          </div>
          <textarea class="form-control"></textarea>
        </form>
      </div>
</div>

Answer 2

试试这个

<div class="container">
      <div class="row">
        <form class="form-inline">
          <div class="form-control">
            <input type="text" placeholder="Your name">
          </div>
          <div class="form-control">
            <input type="text" placeholder="Email address">
          </div>
          <div class="form-control">
            <input type="text" placeholder="Phone number">
          </div>
        </form>
      </div>
</div>

我变了：

• 表单类，从“inline-form”到“form-inline”
• div 类，从“inline-form”到“form-control”

我的代码基于 BS4 帮助：link

如果你想添加.col-md-6，你可以在容器标签之前添加一个DIV标签，像这样

<div class="cold-md-6">
    <div class="container">
        <div class="row">

            <form class="form-inline">

                <div class="form-control">
                    <input type="text" placeholder="Your name">
                </div>
                <div class="form-control">
                    <input type="text" placeholder="Email address">
                </div>
                <div class="form-control">
                    <input type="text" placeholder="Phone number">
                </div>

            </form>
        </div>
    </div>
</div>

[编辑] 根据您自己的代码，我修改了您的代码以达到您想要的结果。

一些变化：

• 表单涉及所有输入字段
• 删除表单标签中的容器（嵌套容器不是一个好主意）
• 为每个表单组件添加 col-4
• 将 col-12 添加到 textarea