向Bootstrap导航栏添加字幕 [英] Adding a subtitle to a Bootstrap Navbar
问题描述
我有一个带有导航栏的Bootstrap 4网站.导航栏具有brand
部分,其中包含图像和标题文本,然后是其余的导航栏.您可以在这里看到它: https://jsfiddle.net/zmbq/aq9Laaew/218793/
I have a Bootstrap 4 website with a navbar. The navbar has a brand
part with an image and title text, and then there's the rest of the navbar. You can see it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/
现在,我想在"A Digital Onomasticon"标题下添加一个字幕.问题是-字幕很长,我希望它可以扩展到导航链接下方.
Now, I want to add a subtitle, under the title "A Digital Onomasticon". The problem is - the substitle is long, and I want it to extend below the nav links.
我尝试了所有我能想到的并且无法弄清楚该怎么做的方法.
I tried everything I could think of and couldn't figure out how to do that.
注意:这个问题的答案是不够的,因为它会产生如下内容: https://jsfiddle.net/zmbq/7et2uz0w/
NOTE: the answer to this question is not sufficient, as it yields something like this: https://jsfiddle.net/zmbq/7et2uz0w/
推荐答案
将品牌和链接包装在单独的flexbox(d-flex
)div中...
Wrap the brand and links in a separate 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
这篇关于向Bootstrap导航栏添加字幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!