我可以在 Bootstrap 表單中嵌套 `` Inside a `` 嗎？-css教學-PHP中文網

我可以在 Bootstrap 表單中嵌套 `` Inside a `` 嗎？

Mary-Kate Olsen

發布： 2024-11-13 08:17:02

原創

963 人瀏覽過

Can I Nest a `` Inside a `` in a Bootstrap Form?

在Bootstrap 表單中將Div 嵌套在標籤內

使用Bootstrap 建立水平表單時，預設範本通常會為每個輸入欄位分配ID。為了避免這種情況，一些開發人員嘗試將輸入欄位及其標籤包含在區塊級

中。內的元素標籤，如下：

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

登入後複製

雖然這種方法似乎可以解決問題，但它與 HTML 標準衝突。

解決不相容性

根據HTML規範，是一個標籤。元素不能包含

;元素。該規範明確指出元素的內容模型僅允許短語內容，其中包括內聯元素，例如和。和，但不是像

這樣的區塊級元素。

因此，巢狀區塊層級

在內聯內

可能的解決方案

如果您希望避免在輸入欄位中使用ID，同時保持正確的HTML結構，請考慮在元素上使用「for」屬性將其與特定輸入欄位關聯的元素：

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control">

登入後複製

以上是我可以在 Bootstrap 表單中嵌套 `` Inside a `` 嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！