html - navbar-brand 文字流出navbar

Question

在为我的页面制作 navbar 时，如果 navbar-brand 文本太大，它就会从导航栏中溢出。有趣的是，我的 navbar 的其他列表项不会发生这种情况。无论我将列表项的字体大小增加多少，navbar 都会随着它们一起增长。这是 HTML-

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="index.php">Brand Name</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a class="navbar_text" href="activities.php">Activities</a></li>
        <li><a class="navbar_text" href="result.php">Results</a></li>
        <li><a class="navbar_text" href="about_us.php">About Us</a></li>
    </ul>
</div>

还有 CSS-

.navbar-nav {
float: right;
}

.navbar {
    background-color: #282343;
}

.navbar_text {
    color: #9B9BD4;
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 39px;
    line-height: 70px;
}

.navbar-brand {
    color: #9B9BD4;
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 59px;
    line-height: 70px;
}

我希望品牌文字比列表项大。请帮忙。

Answer 1

您可以通过将 .navbar-brand 的 line-height 更改为 70px 并将 padding 更改为 0px 来实现。试试这个 CSS。

.navbar-brand {
color: #9B9BD4;
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 50px;
padding: 0px;