在輸入組中引導 5 個浮動標簽

Question

我想一起使用 Bootstrap 的“浮動標簽”和“輸入組”組件。 我遇到的麻煩是當輸入聚焦時標簽是隱藏的。 在下面的代碼示例中，我有以下場景：

1. 兩個組件（請參閱單擊輸入時標簽消失）。
2. 僅浮動標簽

有誰知道使這些組件協同工作的方法？

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-floating input-group mb-3"> <input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> <span class="input-group-text"><i class="fas fa-times"></i></span> </div> <div class="form-floating mb-3"> <input type="text" class="form-control" name="code4" placeholder="Code 4"> <label for="code4">Code 4</label> </div>

Answer 1

為了改進@Unmitigated 的答案，我最終刪除了輸入的兩個右上角的半徑。

 .form-floating-group input { border-bottom-right-radius: 0; border-top-right-radius: 0; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="form-floating form-floating-group flex-grow-1"> <input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> </div> <span class="input-group-text"><i class="fas fa-times"></i></span> </div>

Answer 2

將浮動標簽放在另一個input-group div 中。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="form-floating flex-grow-1"> <input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> </div> <span class="input-group-text"><i class="fas fa-times"></i></span> </div>

Answer 3

我遇到了同樣的需求。

這是我的解決方案：

表格 ：

<div class="col-12">
  <div class="input-group mb-3">
    <span class="input-group-text">Label :</span>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
      @Html.LabelFor(model => model.FieldA)
    </div>
    <div class="form-floating">
      @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
      @Html.LabelFor(model => model.FieldB)
    </div>
  </div>
</div>

注意：我正在使用 ASP.NET，用相應的代碼替換 Editor 和 Label -For 調用：

<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>

查找 Bootstrap 原始方法 (V5.1) 處理圓角邊框。 這是原始代碼行：

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

這是我的自定義 css，基於我對 css 選擇器的了解（我實際上是后端開發人員）：

.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  /*margin-left: -1px;*/
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* for form to be responsive */
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

我想選擇器可以大大改進，因為某些情況不會再發生，請隨時提交改進！

Answer 4

類rounded-0 rounded-start需要避免輸入文本右側的邊界半徑

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="container mt-5"> <div class="input-group"> <div class="flex-grow-1 form-floating"> <input placeholder="Search address" aria-label="Search address" aria-describedby="basic-wallet" type="text" class="rounded-0 rounded-start form-control" value="New York"> <label>Your wallet address</label> </div> <span class="input-group-text"><i class="fas fa-times"></i></span> </div> </div>

Answer 5

.input-group .form-floating input {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

感謝正確的嵌套，為什么要使用新的類命名空間？