Bootstrap实现Dropbox响应式导航栏的三个问题求助

修改后完整代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-white">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="https://i.sstatic.net/ERv7J.png" height="30px"></a>
    
    <!-- 小屏专属：Login/Sign Up -->
    <div class="d-flex align-items-center d-lg-none me-3">
      <a class="nav-link me-3" href="#">Login</a>
      <a class="nav-link" href="#">Sign Up</a>
    </div>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="whyDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Why Dropbox?
          </a>
          <div class="dropdown-menu p-4" aria-labelledby="whyDropdown" style="min-width: 500px;">
            <div class="row">
              <div class="col-6">
                <h6 class="fw-bold mb-3">Dropbox Benefits</h6>
                <a class="dropdown-item py-2" href="#">Sync across devices</a>
                <a class="dropdown-item py-2" href="#">Secure storage</a>
                <a class="dropdown-item py-2" href="#">Collaborate easily</a>
              </div>
              <div class="col-6">
                <h6 class="fw-bold mb-3">Resources</h6>
                <a class="dropdown-item py-2" href="#">Case studies</a>
                <a class="dropdown-item py-2" href="#">Blog</a>
                <a class="dropdown-item py-2" href="#">Help center</a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="productsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Products
          </a>
          <div class="dropdown-menu p-4" aria-labelledby="productsDropdown" style="min-width: 500px;">
            <div class="row">
              <div class="col-6">
                <h6 class="fw-bold mb-3">Individual Plans</h6>
                <a class="dropdown-item py-2" href="#">Basic</a>
                <a class="dropdown-item py-2" href="#">Plus</a>
                <a class="dropdown-item py-2" href="#">Professional</a>
              </div>
              <div class="col-6">
                <h6 class="fw-bold mb-3">Business Solutions</h6>
                <a class="dropdown-item py-2" href="#">Standard</a>
                <a class="dropdown-item py-2" href="#">Advanced</a>
                <a class="dropdown-item py-2" href="#">Enterprise</a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="solutionsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Solutions
          </a>
          <div class="dropdown-menu p-4" aria-labelledby="solutionsDropdown" style="min-width: 500px;">
            <div class="row">
              <div class="col-6">
                <h6 class="fw-bold mb-3">For Teams</h6>
                <a class="dropdown-item py-2" href="#">Marketing</a>
                <a class="dropdown-item py-2" href="#">Engineering</a>
                <a class="dropdown-item py-2" href="#">Design</a>
              </div>
              <div class="col-6">
                <h6 class="fw-bold mb-3">For Industries</h6>
                <a class="dropdown-item py-2" href="#">Education</a>
                <a class="dropdown-item py-2" href="#">Healthcare</a>
                <a class="dropdown-item py-2" href="#">Finance</a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Pricing</a>
        </li>
      </ul>

      <ul class="navbar-nav">
        <li class="nav-item dropdown d-none d-lg-block">
          <a class="nav-link dropdown-toggle" href="#" id="contactsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Contacts
          </a>
          <ul class="dropdown-menu" aria-labelledby="contactsDropdown">
            <li><a class="dropdown-item" href="#">Contact Sales</a></li>
            <li><a class="dropdown-item" href="#">Support</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Find a Partner</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown d-none d-lg-block">
          <a class="nav-link dropdown-toggle" href="#" id="appDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Get App
          </a>
          <ul class="dropdown-menu" aria-labelledby="appDropdown">
            <li><a class="dropdown-item" href="#">Desktop App</a></li>
            <li><a class="dropdown-item" href="#">Mobile App</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Downloads</a></li>
          </ul>
        </li>
        <!-- 大屏专属：Login/Sign Up -->
        <li class="nav-item d-none d-lg-block">
          <a class="nav-link" href="#">Sign Up</a>
        </li>
        <li class="nav-item d-none d-lg-block">
          <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <button type="button" class="btn btn-primary">Get Started <i class="fa fa-long-arrow-right"></i></button>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<style>
/* 下拉菜单样式 */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
}

.dropdown-item {
  color: #333;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #0061ff;
}

/* 导航栏基础样式 */
.navbar {
  border-bottom: 1px solid #eaecef;
}
</style>

问题1：下拉菜单两列布局与加宽 #

• 替换原<ul class="dropdown-menu">为<div class="dropdown-menu">，内部嵌套Bootstrap网格（row + col-6）实现两列分栏
• 用style="min-width: 500px;"强制设置下拉菜单最小宽度，避免内容拥挤
• 添加p-4类给下拉菜单增加内边距，优化内容排版

问题2：匹配指定下拉菜单样式 #

• 自定义CSS移除下拉菜单默认边框，添加柔和阴影与圆角，还原参考样式的视觉层次
• 调整下拉项文字颜色，hover时切换为品牌蓝并添加浅背景，增强交互反馈
• 在下拉菜单内加入<h6>作为分组标题，还原参考样式的内容分组结构
• 把导航栏背景改为白色，添加底部细边框，贴近Dropbox官网风格

问题3：折叠时保留Login和Sign Up选项 #

• 在导航栏切换按钮前新增小屏专属容器（d-lg-none），放置Login/Sign Up链接，确保小屏时始终显示在顶部
• 原折叠容器内的Login/Sign Up添加d-none d-lg-block类，仅在大屏时显示
• 通过Bootstrap响应式类实现不同屏幕尺寸下的元素显隐控制，满足需求

内容的提问来源于stack exchange，提问作者Aswanth DS