Блог

Я пытаюсь отобразить блок моего кода только на средних экранах и только на верхних, и отобразить другой блок кода на маленьких и сверхмалых экранах только с помощью 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-блока).

замените 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>