Bootstrap4 不同的菜单可折叠与展开

Question

如果之前有人问过这个问题，我深表歉意（我对所有这些都是新手，而且还在学习，很难在搜索中找到答案）。

我想要一个可折叠的导航栏，当它展开时，项目由 | 分隔（可以改为右边框），但是当折叠并在汉堡包按钮中时，'|'没有出现分隔符。

现现现，代码如下，图片链接：折叠视图（要删除“|”：

扩展视图（想要保留“|”或至少，看起来相同的内容）：

<nav class="navbar navbar-expand-md navbar-dark sticky-top">
                    <button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navvy">
                        <span class ="navbar-toggler-icon"></span>
                    </button>
                    <div class ="collapse navbar-collapse navbar" id ="navvy">
                        <ul class ="navbar-nav">
                            <li class="nav-item white"><a class="nav-link active navbar-brand " id ="Overview" href ="overviewpage">Overview</a>|
                            </li>
                            <li class="nav-item white"><a class="nav-link active navbar-brand " id ="CS50-nav"  href ="cs50page" style="border-bottom: solid 1px white">CS50</a>|
                            </li>
                            <li class="nav-item"><a class="nav-link active navbar-brand " id = "Portfolio" href ="Portfoliopage">Portfolio</a>
                            </li>
                        </ul>
                    </div>
                </nav>

感谢所有帮助！

Answer 1

您可以添加一些媒体查询规则。例如，在这个片段中，我在桌面版本中添加了一些边框。

您甚至可以使用 bootstrap 助手类仅在移动设备或桌面视图中显示元素。看看https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

希望对您有所帮助！

#navvy>ul.navbar-nav>li {
  display: inline-block;
  width: 100%;
}

/* Desktop versions*/

@media (min-width: 1025px) {
  #navvy>ul.navbar-nav>li {
    width: initial;
    list-style-type: none;
  }
  #navvy>ul.navbar-nav>li>a {
    border-right: 1px solid #666;
    padding-right: 1em;
    margin-right: 1em;
  }
  #navvy>ul.navbar-nav>li:last-child>a {
    border-right: 0;
  }
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark sticky-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navvy">Menu</button>
  <div class="collapse navbar-collapse navbar" id="navvy">
    <ul class="navbar-nav">
      <li class="nav-item white"><a class="nav-link active navbar-brand " id="Overview" href="overviewpage">Overview</a>
      </li>
      <li class="nav-item white"><a class="nav-link active navbar-brand " id="CS50-nav" href="cs50page" style="border-bottom: solid 1px white">CS50</a>
      </li>
      <li class="nav-item"><a class="nav-link active navbar-brand " id="Portfolio" href="Portfoliopage">Portfolio</a>
      </li>
    </ul>
  </div>
</nav>

Bootstrap4 不同的菜单可折叠与展开

Bootstrap4 different menu collapsible vs expanded

html

css

navbar

bootstrap-4