Question

下面是我当前的导航栏设置...

我想在if (typeof value === 'string') { ... } // eslint error angular/typecheck-string

中的两个<ul>之间添加一个空行或水平潜水员

如果仅在导航栏折叠时如何添加此空白项目或水平分隔符？

nav bar id="navbarsExample04"

Answer 1

使用Bootstrap的响应式显示类<hr>如何根据需要显示或隐藏它？

<hr class="d-block d-sm-none">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light">
  <a class="navbar-brand" href="#"><img src=".."></a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample04" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
    <ul class=" navbar-nav mr-auto">
    <li class="nav-item"><a class="nav-link navlinks" href="#">todo</a></li>
    <li class="nav-item"><a class="nav-link navlinks" href="#">todo</a></li>
    <li class="divider-vertical"></li>
    </ul>

    <hr class="d-block d-md-none"> 
      
    <ul class=" navbar-nav ml-auto">
    <li class="nav-item"><a class="nav-link navlinks" href="#">contact</a></li>
    </ul>
  </div>
</nav>

注意：我已修改此示例中的折叠点，以确保在运行代码段时显示折叠。可能需要修改d-md-none类以反映您希望确保水平线不再可见的正确断点。

Answer 2

添加此款式

.navbar-collapse.collapse.show ul:first-child {
  border-bottom: 1px solid #aaa;
}

.navbar-collapse.collapse.show ul:first-child {
  border-bottom: 1px solid #aaa;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light">
  <a class="navbar-brand" href="#">
    <img src="..">
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" (click)="toggleCollapsed()" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse" id="navbarsExample04" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
    <ul class=" navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link navlinks" href="#">todo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navlinks" href="#">todo</a>
      </li>
      <li class="divider-vertical"></li>
    </ul>

    ## ADD A DIVIDER HERE WHEN COLLAPSED
    <ul class=" navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link navlinks" href="#">contact</a>
      </li>
    </ul>
  </div>
</nav>

当collpase navbar-collapse时，水平分隔线或空行

2 个答案: