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 位於具有 .col-md-6 的 div 內（它應該占據頁面寬度的一半）。

Answer 1

嘗試這個

<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>

我變了：

• 形成 class，從“inline-form”到“form-inline”
• div class，從“inline-form”到“form-control”

我的代碼基於 BS4 幫助： 鏈接

如果你想添加.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

Answer 2

您可以將表格 class 更改為“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>