如何解决引导程序 5
我正在学习使用 bootstrap 5,如果这个问题看起来有点基础,请耐心等待!
我正在使用选项卡来生成本地内容的可选项卡窗格。我在这里使用了文档中提供的代码: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
它完美地工作。它也能很好地响应 justify-content,所以标签很容易居中或分布。正是我要找的。p>
但是,我无法将它们与自动边距(mr-auto 和 ml-auto)分开,例如,前两个选项卡将在左侧对齐,最后一个在右侧对齐。当我将它们包含在 ul 标签中时,它会被忽略(而 justify-content 工作得很好)
我希望在 flex 文档中做一些类似的事情: https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins 或者在维基百科中,文章和谈话标签在左边,阅读、编辑和历史在右边。 我怎么能这样做?
解决方法
改变你最近的 li
喜欢:
<li class="nav-item ms-auto" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
在 Bootstrap 5 中,
- t - 用于设置 margin-top 或 padding-top 的类
- b - 用于设置 margin-bottom 或 padding-bottom 的类
- s - 对于在 LTR 中设置 margin-left 或 padding-left,在 RTL 中设置 margin-right 或 padding-right 的类
- e - 用于在 LTR 中设置 margin-right 或 padding-right,在 RTL 中设置 margin-left 或 padding-* left 的类
- x - 对于同时设置 *-left 和 *-right 的类
- y - 对于同时设置 *-top 和 *-bottom 的类
- blank - 用于在元素的所有 4 个边上设置边距或填充的类
更多信息:here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。