时间戳

首页 > 解决方案 > Bootstrap4 不同的菜单可折叠与展开

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

问题描述

抱歉，如果以前有人问过这个问题（我对这一切都很陌生，而且还在学习，很难在搜索中找到答案）。

我试图有一个可折叠的导航栏，当它展开时，项目由 | 分隔 （可以是右边框），但是当折叠并在汉堡按钮中时，“|” 不出现分隔符。

在它们出现的那一刻，下面的代码，图片链接：折叠视图（想要删除'|'：

在此处输入图像描述

扩展视图（想要保留 '|' 或至少，看起来相同的东西）：

在此处输入图像描述

<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>

感谢您的任何帮助！

标签： htmlcssbootstrap-4navbar

解决方案

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

您甚至可以使用引导辅助类仅在移动设备或桌面视图中显示元素。看看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>

推荐阅读