我有一个带有导航栏的 Bootstrap 4 网站。导航栏有一个带有图像和标题文本的brand 部分，然后是导航栏的其余部分。你可以在这里看到它：https://jsfiddle.net/zmbq/aq9Laaew/218793/
现在，我想在标题“A Digital Onomasticon”下添加一个副标题。问题是 - 副标题很长，我希望它延伸到导航链接下方。
我尝试了所有我能想到的方法，但不知道该怎么做。
注意：this question 的答案是不够的，因为它会产生如下内容：https://jsfiddle.net/zmbq/7et2uz0w/
【问题讨论】：
标签： html css bootstrap-4 navbar nav
将品牌和链接包装在单独的 flexbox (d-flex) div...
<nav class="navbar navbar-light bg-light navbar-expand-sm flex-nowrap align-items-start">
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
</a>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<a class="navbar-brand" href="#">A Digital Onomasticon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarOnavbarNavptions" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Item one</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item three</a>
</li>
</ul>
</div>
</div>
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</div>
</nav>
https://www.codeply.com/go/9SK8ItOyzw
【讨论】：
您可以将字幕设置为绝对位置，以将其从正常的内容流中移除。目前还不清楚它在移动设备上的外观，我只是将它隐藏在媒体查询中。示例：
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
A Digital Onomasticon
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</a>
.navbar-brand small {
display: block;
font-size: 10px;
white-space: normal;
position: absolute;
}
@media (max-width: 575.98px) {
.navbar-brand small {
display: none;
}
}
【讨论】：