html - Bootstrap - 菜单下拉菜单下推内容

Question

下拉菜单将内容向下推。

我已经尝试了我能找到的所有“修复”。相对位置、绝对位置、静态位置。但是对于那些，它仍然向下推，尽管当动画结束时，下面的内容会向上跳一点(并且链接在左侧/右侧)。

(Bootstrap 上是否有任何其他菜单选项可以显示侧边栏？)

我已经查看了 Stackoverflow 上的每个问题。相对于 ul 的位置，绝对的，静态的。也把所有放在一个 div 中，尝试 Z-index。

@media (min-width: 576px), (max-width: 768px) {

	.navbar {
		padding-top: 3%;
		padding-bottom: 1%;
		display: flex;
		justify-content: center;
	}

	.navbar-logo img {
		width: 175px;
		height: 21px;
	}

	.navbar-toggler {
		border-style: none;
		outline: none;
	}

	#menuCollapse {
		width: 30px;
		height: 22.5px;
		outline: none;
	}

	.navbar-nav {
		text-align: center;
		font-family: Moon;
		font-size: 18px;
		letter-spacing: 2px;
		margin-top: 10px;
	}

	.navbar-nav li {
		padding-bottom: 10px;
	}

	.navbar-nav li a {
		position: static;
	}

	.nav-link {
		color: #ff6633;
	}

	ul {
		position: absolute;
	}

	.h10 {
		font-family: Moon;
		font-weight: 500;
		line-height: 35px;
		color: #fff;
		text-align: center;
		margin-top: 6%;
		font-size: 30px;
	}

	#chainB {
		color: #58A9FF;
		font-family: Equinox;
		font-weight: 700;
	}

	.h50 {
		font-family: Equinox;
		font-weight: 400;
		color: #fff;
		margin-top: 7%;
		text-align: center;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.getChain {
		text-align: center;
		margin-top: 7%;
	}

	#getChainBtn {
		background-color: #FF6633;
		border: none;
		color: #fff;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 15px;
		border-radius: 25px;
		font-family: Moon;
		font-weight: 700;
	}

	.imageLogos {
		display: flex;
		justify-content: center;
	}

		.imageLogos img {
			width: 30px;
			height: 35px;
			margin-top: 3%;
		}

}

<nav class="navbar navbar-expand-md navbar-light sticky-top">
		<div class="container-fluid">
			<a class="navbar-logo" href="Homepage.html"><img id="Logo" src="./Logo/Logo.png"></a>

			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" style="outline: none;">
				<img src="./Menu/menu.png" id="menuCollapse">
			</button>

			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item active">
						<a class="nav-link" href="#" style= "color: #ff6633;">ABOUT US</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style= "color: #ff6633;">FEATURES</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style= "color: #ff6633;">PRICING</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style= "color: #ff6633;">CONTACT US</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style= "color: #ff6633;">LOGIN</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style= "color: #ff6633;" >SIGN UP</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="content">
	<div class="h10">
		Privacy, security <br /> and freedom by the <span id="chainB">CHAIN.</span>
	</div>

	<div class="h50">
		Completely decentralized, P2P, Swift VPN built on Blockchain
	</div>

	<div class="getChain">
		<button type="button" id="getChainBtn">
			Get ChainVPN Now!
		</button>

		<div class="imageLogos">
			<img src="./Platforms/Windows.png" alt="Windows" style="margin-right: 20px;">
			<img src="./Platforms/Apple.png" alt="Apple" style="margin-right: 20px;">
			<img src="./Platforms/Android.png" alt="Android" style="margin-right: 20px;">
			<img src="./Platforms/Linux.png" alt="Linux" id="Linux">
		</div>
	</div>

Answer 1

在你的例子中，如果你给 .navbar 任何位置，它只是被默认的 Bootstrap css 样式覆盖，但你可以这样做:

.navbar {
        padding-top: 3%;
        padding-bottom: 1%;
        display: flex;
        justify-content: center;

        position: absolute !important; //now position is not overriden
        top: 0; 
        width: 100%;
        background-color: #fff; //just for dropdown to be visible
    }

现在导航不会将内容下推。 Check please my example on codepen .