当我遇到调整窗口大小时导航栏标题行相互重叠的问题时，我正在尝试使用 Bootstrap 功能。
代码如下:
索引.php
<!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">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<header class="container">
<nav class="navbar navbar-default navbar-fixed-top unselectable">
<h1 class="navbar-brand navbar-text">Very very very long title</h1>
<button type="button" class="btn navbar-text">Basic</button>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
自定义.css
body header
{
margin-bottom: 100px;
}
.navbar-default.navbar-fixed-top
{
background-color: rgba(64, 64, 64, 1);
}
.navbar-brand.navbar-text
{
font-size: 55px;
font-family: NAVBAR_TITLE;
text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
color: rgba(140, 0, 0, 1);
}
.navbar-brand.navbar-text:hover
{
color: rgba(158, 47, 47, 1);
cursor: default;
}
我也尝试过修改行高，但它并没有完全按预期工作。
最佳答案
这里的问题是 .navbar-brand 在 Bootstrap 中默认有 height: 50px;。在您的自定义 CSS 中将其设置为自动。
当然，将 line-height: 1; 设置为 .navbar-brand.navbar-text。
body header {
margin-bottom: 100px;
}
.navbar-default.navbar-fixed-top {
background-color: rgba(64, 64, 64, 1);
}
.navbar-brand.navbar-text {
font-size: 55px;
line-height: 1;
font-family: NAVBAR_TITLE;
text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
color: rgba(140, 0, 0, 1);
margin-bottom: 0;
}
.navbar-brand.navbar-text:hover {
color: rgba(158, 47, 47, 1);
cursor: default;
}
.navbar-brand {
height: auto !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="container">
<nav class="navbar navbar-default navbar-fixed-top unselectable">
<h1 class="navbar-brand navbar-text">Very very very long title</h1>
<button type="button" class="btn navbar-text">Basic</button>
</nav>
</header>关于html - 导航栏中的内容重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46974293/