navbar -品牌文本从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

您可以通过将线高更改为70 0px和填充到..navbar品牌的0 0px来做到这一点。试试这个css。

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

}

Answer 2

如果您希望您的内容停留在您的导航栏div内，您可以设置它们的css styes。

  max-height: 90%;
  max-width: 50px;

这将保持它们在您的导航div内的整齐对比，而导航本身可以继续调整大小。设置最大值也将允许您的元素继续缩放，但不要离开父div。最大高度90%将确保您的内容不超过90%的高度，您的导航栏。(根据需要调整值)

Answer 3

也许是因为你用了“浮动:对”的选择器。当您使用{float} -元素“离开”他的边界，以便将自己放在您定义的位置(右)。