bootstrap 中带制表符的自动边距 5

Question

我正在学习使用 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 中，文章和谈话选项卡在左侧，阅读、编辑和历史记录在右侧。我该怎么做？

Answer 1

改变你最后一个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>

在Bootstrap5,

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
空白 - 对于类在元素的所有 4 个边上设置边距或填充

更多信息：here

bootstrap 中带制表符的自动边距 5

Auto margins with tabs in bootstrap 5

css

tabs

margins

auto

bootstrap-5