如何在iPhone设备上隐藏Bootstrap4导航栏中的Link2链接

没问题！要在iPhone这类小屏幕设备上隐藏Bootstrap 4导航栏里的Link2，你可以用两种简单直接的方案，都是Bootstrap开发里常用的思路：

方法1：利用Bootstrap 4内置的响应式显示类 #

Bootstrap 4自带了一套响应式显示控制类，能快速实现不同屏幕尺寸下的元素显示/隐藏。iPhone的屏幕宽度一般小于576px，对应Bootstrap的xs断点（超小屏幕）。

你只需要给Link2的元素添加d-none d-sm-block类：

• d-none：默认隐藏元素
• d-sm-block：在sm断点（≥576px，也就是平板及以上屏幕）时恢复显示

示例HTML代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Link1 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <!-- 给Link2添加响应式类 -->
        <a class="nav-link d-none d-sm-block" href="#">Link2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link3</a>
      </li>
    </ul>
  </div>
</nav>

方法2：自定义媒体查询CSS（更灵活的控制） #

如果需要更精确的屏幕尺寸控制（比如针对特定iPhone型号的宽度），可以写自定义的CSS媒体查询。Bootstrap 4中xs断点的上限是575.98px（避开576px的边界值），我们可以针对这个范围设置隐藏规则：

首先给Link2的元素添加一个自定义类名（比如link-to-hide），然后写CSS：

/* 针对宽度≤575.98px的屏幕（iPhone等小设备）隐藏Link2 */
@media (max-width: 575.98px) {
  .link-to-hide {
    display: none !important; /* 加!important确保覆盖Bootstrap默认样式 */
  }
}

对应的HTML：

<li class="nav-item">
  <a class="nav-link link-to-hide" href="#">Link2</a>
</li>

这样就能精准在iPhone设备上隐藏Link2，同时在更大屏幕上正常显示啦！

内容的提问来源于stack exchange，提问作者midlifecrisis