问题描述
我正在学习使用 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