html - 自定义高度导航栏的 Bootstrap 4 崩溃问题
问题描述
我在 Bootstrap 4 中使用带有品牌徽标图像(150 像素 x 33 像素)的导航栏。
我需要将导航栏的高度增加到 80px。我用它min-height: 80px;
来实现这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="../system/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<style>
.navbar {
min-height: 80px;
background-color: #FFFFFF;
border-bottom-color: #D8D8DD;
border-bottom-style: solid;
border-bottom-width: 1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<a class="navbar-brand" href="#"><img src="logo-placeholder-150px-33px.png" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation01">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation01">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active " href="#">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
</ul>
</div>
</nav>
<script src="../system/jquery/dist/jquery.js"></script>
<script src="../system/popper.js/dist/popper.js"></script>
<script src="../system/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
在较小的视口上,菜单正确折叠并且汉堡图标变得可见。
但是,当我通过单击汉堡图标打开菜单时,徽标的 Y 位置和汉堡图标会发生变化。它们略微向顶部移动。
如何解决这个问题呢?
解决方案
使用填充为导航栏指定高度而不是最小高度。它会解决你的问题。增加导航栏类的填充。
.navbar {
padding: .6rem 1rem;
background-color: #FFFFFF;
border-bottom-color: #D8D8DD;
border-bottom-style: solid;
border-bottom-width: 1px;
}
推荐阅读
- javascript - 在 react native 中渲染来自 JSON 的数据
- typescript - TypeGraphQL 中是否可以有嵌套的联合类型?
- r - twitterR 出现问题,无法定义语言
- apache-flink - [Apache Flink]:flink-s3-fs-hadoop 插件在哪里?
- google-apps-script - Google Apps 脚本中的 getHeight() 和 getNumRows() 有什么区别?
- python - 在 matplotlib 和 PyQt5 中向 Line2D 添加标签
- reactjs - React 未在 Codesandbox 中定义,在本地工作正常
- apache - httaccess 将 mydomain.com/knowledgebase.php 更改为 mydomain.com
- ios - EAExternalAccessory 蓝牙配件选择器不显示在屏幕上
- csv - 提取 CSV 中第一行的部分内容并创建列