【发布时间】：2021-04-25 15:11:36
【问题描述】：
我正在学习使用 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 的响应也很好，因此标签很容易居中或分布。正是我想要的。
但是，我不能用自动边距（mr-auto 和 ml-auto）将它们分开，例如，前两个选项卡将在左侧对齐，最后一个在右侧对齐。当我将它们包含在 ul 标记中时，它会被忽略（而 justify-content 工作得很好）
我正在寻找类似 flex 文档中的内容： https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins 或者在 Wikipedia 中，文章和讨论选项卡在左侧，阅读、编辑和历史记录在右侧。 我怎么能这样做？
【问题讨论】：
-
无需警告我们这个问题是否基本。欢迎您提出任何问题。 ？？？您能否编辑您的问题以删除第一段，并在您的问题的其他地方提及您的问题是关于 Bootstrap 5 的？
标签： css tabs auto margins bootstrap-5