使用 Bootstrap 的显示属性 d-none 时出现问题

Question

我正在尝试仅在中等屏幕和上部屏幕上显示我的代码块，并仅使用 Bootstrap 在小屏幕和超小屏幕上显示另一个代码块。我使用了 Bootstrap 的显示属性，但第一行的 d-none 遇到了问题。我使用了Bootstrap doc，但找不到我的错误在哪里。

这是我的代码：

      <div class="col-4 d-flex justify-content-end align-items-center d-none d-md-block">
        <form class="form-inline d-flex justify-content-center md-form form-sm mt-0 search-desktop">
            <input class="form-control form-control-sm ml-3 w-100" type="text" placeholder="Recherche..." aria-label="Search">
        </form>
      </div>
      <nav class="mobile-nav col-4 d-flex justify-content-end align-items-center d-md-none">
        <svg width="40px" height="40px" viewBox="0 0 16 16" class="bi bi-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
        </svg>
      </nav>

第二个代码块运行良好，它仅显示在小屏幕和超小屏幕上。但即使我只使用 d-none （不使用 d-md-block），第一个代码块始终会显示。

Answer 1

将d-md-flex替换为d-flex并删除d-md-block。

      <div class="col-4 d-md-flex justify-content-end align-items-center d-none">
        <form class="form-inline d-flex justify-content-center md-form form-sm mt-0 search-desktop">
            <input class="form-control form-control-sm ml-3 w-100" type="text" placeholder="Recherche..." aria-label="Search">
        </form>
      </div>