如何解决带有嵌套子菜单的垂直导航菜单右侧不显示内容
关于 bootstrap-4 导航菜单,有人可以建议如何修复嵌套的子菜单,以便相应的内容 - “链接按钮 1”“链接按钮 2”等 - 显示在子菜单的右侧而不是下方子菜单?
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="nav flex-column nav-pills" id="pillnav" role="tablist" aria-orientation="vertical">
<a class="nav-link" id="pill1tab" data-toggle="pill" href="#pill1" role="tab" aria-controls="pill1" aria-selected="true">Pill 1</a>
<a class="nav-link" id="pill2tab" data-toggle="pill" href="#pill2" role="tab" aria-controls="pill2" aria-selected="false">Pill 2</a>
</div>
</div>
<div class="col-sm-9">
<div class="tab-content" id="pillcontent">
<div class="tab-pane fade" id="pill1" role="tabpanel" aria-labelledby="pill1tab">
<div class="nav flex-column nav-pills" id="choice1nav" role="tablist" aria-orientation="vertical">
<a class="nav-link" id="choice1-1tab" data-toggle="pill" href="#choice1-1" role="tab" aria-controls="choice1-1" aria-selected="true">Choice 1-1</a>
<a class="nav-link" id="choice1-2tab" data-toggle="pill" href="#choice1-2" role="tab" aria-controls="choice1-2" aria-selected="false">Choice 1-2</a>
</div>
<div class="tab-content" id="choice1content">
<div class="tab-pane fade" id="choice1-1" role="tabpanel" aria-labelledby="choice1-1tab">Choice 1-1 content</div>
<div class="tab-pane fade" id="choice1-2" role="tabpanel" aria-labelledby="choice1-2tab">Choice 1-2 content</div>
</div>
</div>
<div class="tab-pane fade" id="pill2" role="tabpanel" aria-labelledby="pill2tab">
<div class="nav flex-column nav-pills" id="choice2nav" role="tablist" aria-orientation="vertical">
<a class="nav-link" id="choice2-1tab" data-toggle="pill" href="#choice2-1" role="tab" aria-controls="choice2-1" aria-selected="true">Choice 2-1</a>
<a class="nav-link" id="choice2-2tab" data-toggle="pill" href="#choice2-2" role="tab" aria-controls="choice2-2" aria-selected="false">Choice 2-2</a>
</div>
<div class="tab-content" id="choice1content">
<div class="tab-pane fade" id="choice2-1" role="tabpanel" aria-labelledby="choice2-1tab">Choice 2-1 content</div>
<div class="tab-pane fade" id="choice2-2" role="tabpanel" aria-labelledby="choice2-2tab">Choice 2-2 content</div>
</div>
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。