Question

我试图在我的应用程序中使用BEM方法，所以我从navbar开始，但是我遇到了问题，我的导航项没有显示，并且在桌面版本中显示了汉堡包图标，这是错误的

这是我的代码。

HTML。

<nav class="main-nav">
    <div class="main-nav__logo">
      <li class="main-nav__link">
        <a>Majeni</a>
      </li>
    </div>
    <button class="main-nav__toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="main-nav__icon navbar-toggler-icon"></span>
    </button>
    <div class="main-nav__collapse collapse" id="navbarNav">
      <ul class="main-nav__list ml-auto">
        <li class="main-nav__item--active">
          <a class="main-nav__link" href="#">Home
            <span class="main-nav__current sr-only">(current)</span>
          </a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link" href="#">About us</a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link" href="#">What we do</a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link " href="#">Projects</a>
        </li>
        <li class="main-nav__item">
            <a class="main-nav__link " href="#">Contact</a>
          </li>
      </ul>
    </div>
  </nav>

这是CSS

.main-nav {
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    height: 50px;
    width: 100%;
    &__item{
            padding: 0 2em;
            background-color: #088887;
            display: flex ;
            align-items: center;
        }
    &__link{
        list-style-type: none;
        list-style: none;
    }

UPDATE链接现在可以正常使用

这是jsfidle Navigation Menu with Bem

我的代码有什么问题？我只是新手，因此如果发现任何错误，请随意更正我的代码，或者提供一个有效的示例以简化操作。谢谢

Answer 1

不确定BEM方法，但是我检查了一下，如果您使用的类是：bootstrap最初的“ navbar-collapse”，“ navbar”，“ navbar-nav”，则效果更好。

    .main-nav {
        background-color: green;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        height: 50px;
        width: 100%;
        &__item{
                padding: 0 2em;
                background-color: #088887;
                display: flex ;
                align-items: center;
            }
        &__link{
            list-style-type: none;
            list-style: none;
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<nav class="main-nav navbar navbar-expand-md">
  <div class="main-nav__logo">
    <li class="main-nav__link">
      <a>Majeni</a>
    </li>
  </div>
  <button class="main-nav__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="main-nav__icon navbar-toggler-icon"></span>
  </button>
  <div class="main-nav__collapse collapse navbar-collapse" id="navbarNav">
    <ul class="main-nav__list ml-auto navbar-nav">
      <li class="main-nav__item--active">
        <a class="main-nav__link" href="#">Home
          <span class="main-nav__current sr-only">(current)</span>
        </a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">About us</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">What we do</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Projects</a>
      </li>
      <li class="main-nav__item">
          <a class="main-nav__link " href="#">Contact</a>
        </li>
    </ul>
  </div>
</nav>

但是不确定这是否是您的答案？让我知道（如果仍然需要）

导航栏项目不显示

1 个答案: