Question

我似乎在左边有品牌名称，在右边有导航链接。但是，我希望下拉菜单在屏幕缩小到较小尺寸时显示为按钮。现在，我的代码同时在右侧显示了堆叠菜单以及在屏幕中间显示了下拉菜单按钮。我希望在大屏幕上保持链接不变，而在小屏幕上只有下拉菜单按钮。示例输出为：Small screen image和Large screen image

到目前为止，我的这段代码片段是：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
 <div class="container-fluid">
  <a id = "siteName" class="navbar-brand" href="../landing.html">Latitude</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="nav navbar-nav navbar-right">
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plots</a>
         <div class="dropdown-menu" arialabelledby="navbarDropdown">
         <a class="dropdown-item" href="vis_maxTemp.html">Maximum Temperature</a>
          <a class="dropdown-item" href="vis_humidity.html">Humidity</a>
          <a class="dropdown-item" href="vis_cloudiness.html">Cloudiness</a>
          <a class="dropdown-item" href="vis_windSpeed.html">Wind Speed</a>
    </li>
                                    
    <li class="nav-item">
        <a class="nav-link" href="../comparison.html">Comparison</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="../data.html">Data</a>
         </li>
      </ul>
   </div>
  </div>                  
</nav>

Answer 1

从navbar-right中删除<ul class="nav navbar-nav navbar-right"></ul>并使用媒体查询：

.dropdown-menu {
  border: none !important;
  background: transparent !important;
}

@media only screen and (min-width: 992px) {
  .navbar .nav {
    margin-left: auto;
  }
  .dropdown-menu {
    left: auto !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    background: #fff !important;
    right: 0;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a id="siteName" class="navbar-brand" href="../landing.html">Latitude</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="nav navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plots</a>
          <div class="dropdown-menu" arialabelledby="navbarDropdown">
            <a class="dropdown-item" href="vis_maxTemp.html">Maximum Temperature</a>
            <a class="dropdown-item" href="vis_humidity.html">Humidity</a>
            <a class="dropdown-item" href="vis_cloudiness.html">Cloudiness</a>
            <a class="dropdown-item" href="vis_windSpeed.html">Wind Speed</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="../comparison.html">Comparison</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../data.html">Data</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navbar Bootstrap下拉菜单出现问题

1 个答案: