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

Posted 2023-03-05

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

【英文标题】：Bootstrap: Creating 3 input form fields on a row and spacing evenly, taking up half the page's width?

【发布时间】：2021-06-24 13:36:28

【问题描述】：

<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 （它应该占据页面宽度的一半）。

【问题讨论】：

我想你忘了在你的代码 sn-p 中包含 col-md-6 类？

【参考方案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>

【参考方案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

【讨论】：

您好，非常感谢。但是，当它们位于半页列中时，我仍然遇到它们间距不正确的问题。在我将您的代码插入我的网页后，您能看一下结果吗？ drive.google.com/drive/folders/…

你测试了吗？