Question

我只想在小屏幕上将d-flex类应用于我的元素。浏览文档（https://getbootstrap.com/docs/4.3/utilities/flex/）时，我找不到解决方法。我已经尝试过d-sm-flex，但是那似乎是小事。

有人会知道如何仅针对sm断点执行flex吗？还是我必须自己写这个？

我的代码是否重要：

       <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>

由于导航已被设置为Flexbox容器，因此您也可以删除d-sm-flex：

<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>

Bootstrap 4：如何仅在较小的断点上应用flex？

1 个答案: