首页 前端开发 Bootstrap 4 Split Navbar - 下方的响应式下拉菜单
Bootstrap 4 Split Navbar - 下方的响应式下拉菜单
[英] Bootstrap 4 Split Navbar - Responsive Dropdown Below not Beside
本文介绍了Bootstrap 4 Split Navbar - 下方的响应式下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有拆分下拉菜单的导航栏.我感兴趣的 HTML 的特定部分是这样的:
<div class="btn-group"><a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">博客</a><a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">切换博客链接的下拉菜单</span></a><div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog"><div class="dropdown-header">类别 |<a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div><a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>适合所有人的文章</em><;/小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>诉诸司法评论</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>法律评论</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>法律未来主义</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>律师资源</em>;/小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>技术</em></小</a>
整个导航栏看起来像这样:
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="切换导航"><i class="fa fa-bars fa-lg" aria-hidden="true"></i><a class="navbar-brand" href="#home">Brandon D. Hastings<small class="hidden-md-down">BBA(Dist.)，JD</small></a><div class="navbar-collapse collapse" id="navbarNavDropdown"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#law">Law</a><li class="nav-item"><a class="nav-link" href="#technology">技术</a><li class="nav-item"><a class="nav-link" href="#media">Media</a><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a><div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink_more"><a class="dropdown-item" href="#miscinfo">更多关于我</a><div class="dropdown-divider"></div><div class="dropdown-header"><em>新标签/窗口</em></div><a class="dropdown-item" href="http://(bitly not allowed)/BHastings_CV" target="_blank">简历</a><a class="dropdown-item" href="http://bhastings.com/blog/category/resources-for-lawyers/" target="_blank">律师资源</a> <li class="nav-item"><div class="btn-group"><a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">博客</a><a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">切换博客链接的下拉菜单</span></a><div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog"><div class="dropdown-header">类别 |<a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div><a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>适合所有人的文章</em><;/小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>诉诸司法评论</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>法律评论</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>法律未来主义</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>律师资源</em>;/小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>技术</em></小</a>
<li class="nav-item btn btn-danger btn-sm"><a class="nav-link text-white url-firm" href="http://www.quaylawcentre.com/Lawyer-Profiles/Brandon-Hastings-Bba-dist-jd.shtml" target="_blank">取得联系<span class="sr-only"></span></a>
</nav>
在小屏幕上的结果是这样的:
在导航栏中使用拆分链接开始有点麻烦，但尽管如此，我想知道是否有人知道如何让下拉菜单对齐"弹出，使其看起来更像更多"下拉菜单:
?
提前致谢！:)
解决方案
只需在 btn-group div 中添加 container 类即可.错位是因为 btn-group 类被定义为弹性项目.尝试添加 container 类，它可能会解决问题.
<a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">博客</a><a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">切换博客链接的下拉菜单</span></a><div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog"><div class="dropdown-header">类别 |<a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div><a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>适合所有人的文章</em><;/小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>诉诸司法评论</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>法律评论</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>法律未来主义</em></小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>律师资源</em>;/小></a><a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>技术</em></小</a>
I have a navbar with a split dropdown. The particular portion of the HTML I'm interested in is this:
<li class="nav-item">
<div class="btn-group">
<a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">Blog</a>
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | <a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
And the entire navbar looks like this:
<nav class="navbar navbar-toggleable-sm fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#home">Brandon D. Hastings<small class="hidden-md-down"> BBA(Dist.), JD</small></a>
<div class="navbar-collapse collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#law">Law</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technology">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#media">Media</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink_more">
<a class="dropdown-item" href="#miscinfo">More About Me</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header"><em>New Tab / Window</em></div>
<a class="dropdown-item" href="http://(bitly not allowed)/BHastings_CV" target="_blank">Curriculum Vitae</a>
<a class="dropdown-item" href="http://bhastings.com/blog/category/resources-for-lawyers/" target="_blank">Resources for Lawyers</a>
</div>
</li>
<li class="nav-item">
<div class="btn-group">
<a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">Blog</a>
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | <a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
<li class="nav-item btn btn-danger btn-sm">
<a class="nav-link text-white url-firm" href="http://www.quaylawcentre.com/Lawyer-Profiles/Brandon-Hastings-B-b-a-dist-j-d.shtml" target="_blank">Get in Touch<span class="sr-only"></span></a>
</li>
</ul>
</div>
</nav>
The result is something like this in small screens:
Having a split link in a navbar is a bit hacky to begin with, but notwithstanding that, I'm wondering if anyone knows a way to get the dropdown to pop back "in line" so that it looks more like the "More" dropdown:
?
Thanks in advance! :)
解决方案
Just add container class in the btn-group div.
The misalignment is because of the btn-group class is defined as flex item. Try adding container class, it may solve the issue.
<div class="container p-0 btn-group">
<a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">Blog</a>
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | <a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
这篇关于Bootstrap 4 Split Navbar - 下方的响应式下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
