css - Bootstrap 4 : How to apply flex only on small breakpoint?

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>