為什么我的某些Bootstrap導航欄專案隱藏在移動設備上？

導航欄的其他元素不會出現在我的移動設備上，只有徽標。

導航欄 HTML 代碼：

.navbar-logo {
    width: 93.75px;
    height: 23.5px;
    margin-left: 10rem;
}

.navbar-right-space {
    margin-right: 10rem;
}

.nav-icon {
    color: #fff;
    text-decoration: none;
    font-size: 26px;
    transition: 0.5s;
}

.nav-icon:hover {
    font-size: 28px;
    color: #fff;
}

#navRight .nav-item {
    margin-left: 10px;
}

#navElements {
    margin-top: 0.75rem;
}

#navRight {
    margin-right: 10rem;
}

<!-- NavBar -->
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
  <a class="navbar-brand" href="https://ionut.app/"><img src="assets/img/logo_light.png" alt="Ionut Logo" class="navbar-logo"></a>
  <div class="collapse navbar-collapse" id="navElements">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
      <li class="nav-item">
        <a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut"></a>
      </li>
      <li class="nav-item">
        <a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/"></a>
      </li>
      <li class="nav-item">
        <a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/"></a>
      </li>
    </ul>
  </div>
</nav>
<!-- End of Nav Bar -->

uj5u.com熱心網友回復：

可折疊元素內的任何內容都會隱藏以供移動使用。假定您將使用切換按鈕（您沒有）顯示它。請參閱 檔案。

.navbar-logo {
  width: 93.75px;
  height: 23.5px;
  margin-left: 10rem;
}

.navbar-right-space {
  margin-right: 10rem;
}

.nav-icon {
  /* color: #fff; */
  text-decoration: none;
  font-size: 26px;
  transition: 0.5s;
}

.nav-icon:hover {
  font-size: 28px;
  color: #fff;
}

#navRight .nav-item {
  margin-left: 10px;
}

#navElements {
  margin-top: 0.75rem;
}

#navRight {
  margin-right: 10rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
  <a class="navbar-brand" href="https://ionut.app/"><img src="https://via.placeholder.com/80" alt="Ionut Logo" class="navbar-logo"></a>

  <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
    <li class="nav-item">
      <a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut">Github</a>
    </li>
    <li class="nav-item">
      <a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/">Instagram</a>
    </li>
    <li class="nav-item">
      <a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/">Facebook</a>
    </li>
  </ul>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

標籤：html css 推特引导 bootstrap-5

上一篇：更改側邊欄模板的默認顏色

下一篇：如何在bootstrap圓形d-flex中使用max-width