Bootstrap 4：如何仅在小断点上应用 Flex？

Question

我想d-flex仅在小屏幕上将该类应用于我的元素。查看文档（https://getbootstrap.com/docs/4.3/utilities/flex/）我找不到办法做到这一点。我已经尝试过d-sm-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>

您还可以删除 nav，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>