Question

我正在一个简单的项目上，尝试创建一个带有汉堡菜单的响应式导航栏，在最大宽度为480px的设备上，菜单位于左侧。到目前为止，这是我所掌握的，并且不确定我在做什么错。我尝试在导航栏和下拉菜单中定位不同的类，但没有任何效果。抱歉，我发布的格式错误或错误。我仍然对Stack还是陌生的，总是能提供任何帮助。谢谢！

HTML：

<nav>
<!--Navbar Start-->
<div class="container-fluid">
    <div class="row">
        <div class="col-12 border-bottom border-dark">
            <div class="page-header text-center">
                <h1>Genealogist</h1>
            </div>
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Learn More</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
                <li class="nav-item dropdown ml-md-auto">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                        data-toggle="dropdown">Dropdown link</a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another
                            action</a> <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider">
                        </div> <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </nav>
    <!--Navbar End-->

CSS：

html, body {
    overflow-x: hidden;
    
}

.dropdown {
    
}

img:hover {
    transform: translateX(60px);
    
}

.form {
    padding-top: 50px;
}

main {
    background-color: lightblue;
    border-bottom: solid black 2px;
    background-size: cover;
    
    
}

.experience ul {
    list-style-type: none;
}


/* Width Covers 0px-480px */
@media screen and (max-width: 480px) { 
    nav ul { display: none; }
    nav select { display: inline-block; }
}

/* Width Covers 481px-768px */
@media screen and (min-width: 768px) {
    body {
      
    }

}

/* Width Covers 769px-1025px (and greater) */
@media screen and (min-width: 1025px) {
  body {
    
  }

}

Answer 1

这里没有媒体查询的要求，因为引导导航栏非常敏感！您只需要在正确的位置使用正确的类即可。代码

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<div class = "container">
  <br><h1 class="text-center">Genealogist</h1>
  <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler align-center" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Learn More</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <div class="dropdown show">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
  </nav>
</div>

如何使用Bootstrap创建响应式汉堡菜单？

1 个答案: