Bootstrap 4: Как применить flex только на небольшой точке останова?

Question

Я бы хотел применить класс d-flex к своему элементу только на маленьких экранах.Просматривая документацию (https://getbootstrap.com/docs/4.3/utilities/flex/) Я не могу найти способ сделать это. Я пробовал d-sm-flex, но этот стиль, кажется, для малого и выше.

Кто-нибудь знает, как иметь flexработать только для точки останова sm? Или мне придется написать это самому?

Мой код, если он имеет значение:

       <ul class="nav d-sm-flex">
          <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
          <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
          <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
          <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
          <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
        </ul>

Answer 1

Вам нужно добавить еще один, чтобы переопределить для следующей точки останова.В вашем случае это md, поэтому сделайте его снова block (по умолчанию).

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="nav d-sm-flex d-md-block">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>

Вы также можете удалить d-sm-flex, так как nav уже настроен как контейнер flexbox:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="nav d-md-block">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>