如何让navtabs在浏览器窗口缩放时始终保持居中显示？

嗨，我来帮你搞定这个导航标签居中的问题！你现在遇到的情况是因为原来的布局用了固定的偏移量和列宽，窗口缩放时没法自适应调整，所以标签会跑歪。我给你几个简单的解决方案，根据你用的Bootstrap版本选就行：

方案一：Bootstrap 4+ 推荐用法（内置flex类） #

Bootstrap 4及以上版本的row本身就是flex容器，直接用内置的对齐类就能轻松实现居中：

<div class="row">
  <div class="col-12">
    <ul class="nav nav-tabs justify-content-center">
      <li class="active"><a data-toggle="tab" href="#admin_login_form"><strong>Admin</strong></a></li>
      <li><a data-toggle="tab" href="#librarian_login_form"><strong>Librarian</strong></a></li>
      <!-- 这里补全你剩下的标签项 -->
    </ul>
  </div>
</div>

• col-12让这个列占满整行宽度，给导航标签提供足够的居中空间
• justify-content-center是flex布局的水平居中类，不管窗口怎么缩放，导航标签都会一直保持在屏幕中间

方案二：Bootstrap 3 适配方案 #

如果你还在使用Bootstrap 3，可以通过调整文本对齐和元素显示方式来实现：

<div class="row">
  <div class="col-xs-12 text-center">
    <ul class="nav nav-tabs" style="display: inline-block; float: none;">
      <li class="active"><a data-toggle="tab" href="#admin_login_form"><strong>Admin</strong></a></li>
      <li><a data-toggle="tab" href="#librarian_login_form"><strong>Librarian</strong></a></li>
      <!-- 这里补全你剩下的标签项 -->
    </ul>
  </div>
</div>

• text-center让父容器内的元素水平居中
• display: inline-block让导航栏不再强制占满整行，而是根据内容宽度自适应
• float: none取消Bootstrap默认给导航标签加的浮动，确保居中生效

方案三：自定义CSS（通用所有版本） #

如果不想依赖框架内置类，也可以写自定义CSS来实现：

首先添加自定义样式：

.tab-center-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tab-center-container .nav-tabs {
  float: none;
}

然后修改HTML结构：

<div class="row">
  <div class="col-12 tab-center-container">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#admin_login_form"><strong>Admin</strong></a></li>
      <li><a data-toggle="tab" href="#librarian_login_form"><strong>Librarian</strong></a></li>
      <!-- 这里补全你剩下的标签项 -->
    </ul>
  </div>
</div>

这个方法兼容性更强，不管用哪个Bootstrap版本都能生效。

内容的提问来源于stack exchange，提问作者ammar ammary