在行列中建立內聯表單

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