Question

导航栏的图片：

预期： Expectations navbar

现实： Reality navbar

我能解决这个问题吗

我的导航栏代码

<nav class="navbar navbar-default navbar fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="" class="navbar-brand">NavbarBrand</a>
                </div>
                <nav class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">A</a></li>
                    <li>A</li>
                </ul>
            </div>
        </nav>

Answer 1

a:link {
  color: gray;
}
.nav-link:hover {
  color: white;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="nav bg-dark text-white">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

还要检查此fiddle。

要获取页面中间的导航栏，请使用<ul class="nav justify-content-center">获取页面右边的导航，请使用<ul class="nav justify-content-end">获取有关引导basenav的更多信息

Answer 2

<div class="navigation">
    <div class="navigation__container">
        <div class="navigation__container_logo">
            NavbarBrand
        </div>
        <nav class="navigation__container_menu">
            <ul class="navigation__container_menu_list">
                <li class="navigation__container_menu_list--item">
                    <a href="#">link</a>
                </li>
                <li class="navigation__container_menu_list--item">
                    <a href="#">link</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

.navigation{
  padding: 10px;
  &__container{
    display: flex;
    align-items: center;
    border: solid 1px #000;
    border-right-color: transparent;
    border-left-color: transparent;
    padding: 5px 20px;
    &_logo{
      max-width: 100%;
    }
    &_menu{
      flex: 1;
      max-width: 100%;
      &_list{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &--item{
          margin-right: 10px;
          > a{
            color: #000;
            font-size: 12px;
          }
          &:hover{
            >a {
              color:#f90;
            }
          }
        }
      }
    }
  }
}

Answer 3

HTML

term => ARRAY[“lamp”, “blue”]

CSS

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img class="logo horizontal-logo" src="LOGO link" alt="logo">
      </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown3">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

JS

body {
  background: #f2f2f2;
}

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear; 
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.dropdown-menu {
  margin-top: 0;
}

Answer 4

嗨，我已经阅读了您的代码，并且以前已经为其他人解决了同一问题，我在CodePen中制作了一个小型且简单的导航系统，它将帮助您解决导航系统的对齐问题。另外，在html文件中不需要三行代码。它们是<div class="container-fluid">和<li>A</li>和<nav class="navbar navbar-default navbar fixed-top">。

构建导航系统时，无需在html文件中声明它是导航栏，<ul>标签和<li>标签首先是无序列表，所有导航条是无序列表。此外，我添加了CSS代码以帮助您解决无序列表的对齐问题，并且有一个代码可以对导航系统中的所有空白进行整理

此外，下面链接中的导航栏不使用任何引导程序工具，导航栏纯粹是css和html。希望此链接对您有帮助

这是下面的链接： [https://codepen.io/X_Viperxz72/pen/zYrEZGB]

导航栏不合适

4 个答案: