我正在尝试制作一个响应式bootstrap 4网站。当屏幕分辨率达到中等大小时，我需要在那里提供一个汉堡菜单，并使该菜单产生与桌面完全不同的菜单（颜色相同，大小却相差很大）。我正在以1080p分辨率开发此网站，所以我认为这是xlarge的大小。我在整个过程中都考虑了响应式设计。我希望一切都可以通过使用响应式设计来扩展，但是当我缩小google chrome时，我的“内容框”和其他区域不会保持缩放，这看起来与我想要的有所不同。我对此并不陌生，也许有人可以向我推荐一些Web开发人员工具？到目前为止，我使用Google chrome检查了很多，以检查我的CSS。
我知道如何获取汉堡菜单，但无法弄清楚如何生成新的导航栏并为较大的屏幕尺寸取下导航栏。我希望有人能为此指向我，因为我自己找不到合适的人。
<body>
<div style="background: #6B7A8F; width: 100vw; height: 100vh;">
<div class="container">
<ul class="nav navbar navbar-expand-md fixed-top navbar-light navbar-custom-bg justify-content-center ">
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #6B7A8F; " href="# ">MY NAME</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #F7882F; " href="# ">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #F7C331; " href="# ">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #DCC7AA; " href="# ">CONTACT</a>
</li>
</ul>
</div>
<div class="container" style="background: #6B7A8F; padding-top: 13%; width: 50%; height: 100vh;">
<div style="width: 100%; height: 0px; text-align: right; font-family: 'Righteous'; padding: 0px; margin: 0px;">
<h1>Greetings! </h1>
</div>
<div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7882F; height: 80%; margin-top: 9%; padding: 3%; color: white;">
<h2>My Heading</h2>
<!-- <div class="row ">
<div class="col "></div>
<div class="col-8 ">I'm content inside the grid!</div>
<div class="col "></div>
</div> -->
</div>
</div>
<div style="background: #F7882F; width: 100vw; height: 100vh;">
<div class="container" style="background: #F7882F; padding-top: 5%; width: 50%; height: 100vh;">
<div style="width: 100%; height: 4%; text-align: right; font-family: 'Righteous';">
<h1>What I offer:</h1>
</div>
<div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7C331; height: 88%; margin-top: 5%; padding: 3%; color: white;">
<h2>My Heading</h2>
<!-- <div class="row ">
<div class="col-2 "></div>
<div class="col-8 ">I'm content inside the grid!</div>
<div class="col-2 "></div>
</div> -->
</div>
</div>
</div>
</div>
我希望导航栏可以缩放，直到它在bootstrap 4中达到中等分辨率为止。然后，我基本上需要一个完全不同的菜单。另外，我的内容领域并没有按我希望的那样扩展。 -另外感到好奇的是，如果我使用px而不是百分比，而我尝试使用其他“响应”元素，是否会在bootstrap 4中自动使用px的比例？还是我做对了？
谢谢！
最佳答案
首先，从容器div中删除导航栏，然后将导航栏放入导航栏中。我编辑了您的代码：
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-light navbar-custom-bg justify-content-center ">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #6B7A8F; " href="# ">MY NAME</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #F7882F; " href="# ">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #F7C331; " href="# ">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #DCC7AA; " href="# ">CONTACT</a>
</li>
</ul>
</nav>
<div style="background: #6B7A8F; width: 100vw; height: 100vh;">
<div class="container" style="background: #6B7A8F; padding-top: 13%; width: 50%; height: 100vh;">
<div style="width: 100%; height: 0px; text-align: right; font-family: 'Righteous'; padding: 0px; margin: 0px;">
<h1>Greetings! </h1>
</div>
<div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7882F; height: 80%; margin-top: 9%; padding: 3%; color: white;">
<h2>My Heading</h2>
<!-- <div class="row ">
<div class="col "></div>
<div class="col-8 ">I'm content inside the grid!</div>
<div class="col "></div>
</div> -->
</div>
</div>
<div style="background: #F7882F; width: 100vw; height: 100vh;">
<div class="container" style="background: #F7882F; padding-top: 5%; width: 50%; height: 100vh;">
<div style="width: 100%; height: 4%; text-align: right; font-family: 'Righteous';">
<h1>What I offer:</h1>
</div>
<div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7C331; height: 88%; margin-top: 5%; padding: 3%; color: white;">
<h2>My Heading</h2>
<!-- <div class="row ">
<div class="col-2 "></div>
<div class="col-8 ">I'm content inside the grid!</div>
<div class="col-2 "></div>
</div> -->
</div>
</div>
</div>
</div>
关于html - Bootstrap 4导航栏和扩展问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56550832/