Bootstrap 4.4.1中select区块后按钮HTML无法渲染问题

你的问题出在<select>标签的写法上：HTML规范里，<select>是非自闭合标签，不能用<select ... />这种自闭合形式，浏览器会错误地将后续所有内容（包括你的按钮区块）解析为<select>的内部内容，从而导致按钮无法正常显示。

修复步骤 #

把自闭合的select标签：

<select id="tagselectorparent_tagList" name="tagList" validationMessage="At least one tag is required" />

改成带闭合标签的形式：

<select id="tagselectorparent_tagList" name="tagList" validationMessage="At least one tag is required"></select>

验证修复后的完整代码 #

<html lang="en-CA">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div id="tagselectorparentPopup">
    <div class="mb-0 pb-0 pl-3 pt-3 px-3 overflow-hidden">
      <form id="tagselectorparent_Form">
        <!-- Select section -->
        <div class="form-row">
          <div class="form-group row col-12">
            <label for="tagselectorparent_tagList" class="col-4 col-form-label">List of the Segment Components (Tags)</label>
            <div class="col-6">
              <div>
                <select id="tagselectorparent_tagList" name="tagList" validationMessage="At least one tag is required"></select>
              </div>
              <span class="k-invalid-msg" data-for="tagList"></span>
            </div>
          </div>
        </div>
        <!-- Insert button section -->
        <div class="form-row justify-content-center">
          <div class="form-group row col-12">
            <div class="form-row">
              <button type="button" class="btn btn-secondary" id="tagselectorparent_btnCancel">Cancel</button>
              <button type="button" class="btn btn-primary" id="tagselectorparent_btnInsert">Insert</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

修改后浏览器能正确解析DOM结构，按钮区块即可正常显示在select区域之后。

内容的提问来源于stack exchange，提问作者james.m.phillips