响应式 Bootstrap 4 导航栏下拉项目显示为导航项目答案

【问题标题】：Responsive Bootstrap 4 navbar dropdown-items display as nav-items响应式 Bootstrap 4 导航栏下拉项目显示为导航项目
【发布时间】：2019-04-26 12:01:33
【问题描述】：

您好，提前感谢您的帮助。这是相关网站的链接：caulfield.co/test/originals.html

我正在尝试创建一个响应式navbar，其中当前的dropdown-items 在折叠后显示为标准nav-items。

看这张图片：

dropdown-items 在桌面上按预期显示。但是，在移动设备上，不需要单独的下拉菜单。这是开箱即用的 Bootstrap 4 的显示方式：

有没有人知道在移动设备上使用navbar-collapse 时删除dropdown 的方便或自定义解决方案，这样dropdown-items 看起来就像navbar-items？理想情况下，“更多”nav-link 将display:none 和nav-items 无缝地从“联系”继续到“作品展示”。

HTML：

<nav id="navHome" class="navbar navbar-expand-lg navbar-light sticky-top">
  <div class="container-fluid max-width-940">
  <a class="navbar-brand" href="index.html">
    <img src="images/mb.svg" alt="Margaret Biggs" width="220px"/>
  </a>
  <button class="navbar-toggler togglerNoBorder" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse backgroundWhite" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="bio.html">Bio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="originals.html">Originals</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="exhibition.html">Exhibition</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="prints.html">Prints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="professionals.html">For Professionals</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
      <li class="nav-item dropdown navDropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          More
        </a>
        <div class="dropdown-menu navDropdown" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="works-on-display.html">Works on Display</a>
          <a class="dropdown-item" href="poetry.html">Poetry</a>
          <a class="dropdown-item" href="commissions.html">Commissions</a>
          <a class="dropdown-item" href="blog.html">Blog</a>
        </div>
      </li>
    </ul>
  </div>
</div>
</nav>

CSS：

.navbar-right {
  float:right;
}

.togglerNoBorder{
  border: 0px solid transparent;
}

.nav940{
  max-width:940px;
  margin:0 auto;
}

#navHome {
  color:rgb(34, 34, 34);
  font-size:13px;
  font-weight:400;
  line-height:16px;
  text-transform:uppercase;
  background-color:white;
  height:60px;
  box-shadow: 0 0 18px -4px #000;
}

#navHome a{
  color:rgb(34, 34, 34);
}

#navHome a:hover{
  color:#165fa5;
}

.navDropdown {
  font-size:13px;
}

.navDropdown a:hover {
  background-color:white;
}

.backgroundWhite{
  background-color:white;
}

.nav-item{
  padding-left:10px;
}

.dropdown-item {
  padding-top:10px;
}

.navbar-brand {
  margin-bottom:3px;
}

.dropdown-menu {
  top:45px;
}

【问题讨论】：

标签： drop-down-menu bootstrap-4 navbar responsive

【解决方案1】：

使用移动设备的@media 查询 (dropdown-menu 显示为正常的导航链接...

@media (max-width: 992px) {
    .dropdown-toggle {
        display: none;
    }

    .dropdown-menu {
        display: block;
        position: relative;
        border-width: 0;
        padding: 0;
        margin: 0;
    }

    .dropdown-item {
        padding: .5rem 0rem;
        color: rgba(0,0,0,.5);
    }
}

https://www.codeply.com/go/lAAQOwhAx0

【讨论】：

【解决方案2】：

基于@Zim 的出色回答，我稍微修改了样式以使其并排放置在黑暗的导航栏中。用 Bootstrap 5 测试过，但我想它也应该在 Bootstrap 4 中工作。

@media (max-width: 992px) {
.dropdown-toggle {
    display: none;
}

.dropdown-menu {
    position: relative;
    display: contents;
    border-width: 0;
    padding: 0;
    margin: 0;
    color: transparent;
}

.dropdown-item {
    color: white;
    background-color: black;
    display: inline;
}

}

【讨论】：