移动版导航栏自动响应

Question

我目前是 web 编程的初学者，我遇到了一个问题，当移动屏幕发生变化时导航栏会变底，我没有看到这个问题的任何好的源代码，因为有些人使用 hamburger风格。

这是我未将其更改为较小视图时手机的当前视图

这是将视图缩小后的视图

代码如下：

.servicebtn,
.contactbtn,
.careerbtn,
.aboutbtn {
  height: 40px;
}

@font-face {
  font-family: "bebas";
  src: url('font-family/bebas/BEBAS.woff') format('woff');
}

@font-face {
  font-family: "cairo";
  src: url('font-family/cairo/Cairoreg.ttf') format('truetype');
}

.servicebtn,
.contactbtn,
.careerbtn,
.aboutbtn {
  font-family: cairo;
  text-transform: capitalize;
}

.nav-item {
  background-color: black !important;
  border-radius: 10px 10px 0px 0px;
}

.nav-item:hover,
.nav-item:focus {
  background-color: #01FF9D !important;
  color: white;
  border-radius: 10px 10px 0px 0px;
}

.boder {
  background-color: grey !important;
  color: black;
}

.active:focus {
  background-color: #01FF9D !important;
  color: white !important;
}

.nav-link {
  color: white;
  border-radius: 10px 10px 0px 0px;
}

.nav-link:focus,
.nav-link:hover {
  color: white;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: black;
  background-color: #01FF9D !important;
  border-color: transparent !important;
  border-radius: 10px 10px 0px 0px !important;
}

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

<ul class="nav nav-tabs header">
  <li class="nav-item">
    <a class="nav-link text aboutbtn" aria-current="page" data-bs-toggle="tab" href="#about"><i class="fas fa-chalkboard-teacher"></i> About Us</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text servicebtn" data-bs-toggle="tab" href="#service"><i class="fas fa-search"></i> Viewrify</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text contactbtn" data-bs-toggle="tab" href="#contact"><i class="fa fa-user" aria-hidden="true"></i> Contact Us</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text careerbtn" data-bs-toggle="tab" href="#career"><i class="fa fa-camera" aria-hidden="true"></i> Careers</a>
  </li>
</ul>

好吧，在@media 中，我删除了它，因为它不起作用：/而且我不知道该怎么做，如果我更改了 nav-items 的宽度，那么它在图片

Answer 1

使用 flexbox 可以轻松完成。请试试这个

ul.nav.header {
    display: flex;
    flex-wrap: nowrap;
}

移动版导航栏自动响应

Navbar auto responsive in mobile version

css

bootstrap-5

laravel-8