如何设置Ngb-Tabset标签页标题与其他标题同行显示？

我明白你想要让Ngb-Tabset的标签栏和页面中的其他标题元素处于同一行的需求，这其实可以通过灵活运用布局样式或者自定义标签模板来实现，下面给你两种实用的方案：

方案一：利用Flex布局快速实现（推荐） #

默认情况下，Ngb-Tabset的标签栏是块级元素，会独占一行。我们可以通过把标题和Tabset放在一个Flex容器里，让它们横向排列：

HTML代码示例 #

<!-- 外层容器使用Flex布局，让标题和Tabset横向对齐 -->
<div class="d-flex align-items-center">
  <!-- 你的其他标题元素 -->
  <h2 class="me-3">页面主标题</h2>
  <!-- Tabset所在的卡片容器，设置flex-grow占满剩余空间 -->
  <div class="card flex-grow-1">
    <ngb-tabset>
      <ngb-tab title="One">
        <ng-template ngbTabContent>
          <p>These tabs are 1</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Two">
        <ng-template ngbTabContent>
          <p>These tabs are 2</p>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</div>

代码说明 #

• d-flex：将容器设置为Flex布局，内部元素默认横向排列
• align-items-center：让容器内的元素垂直居中，保证标题和标签栏对齐美观
• me-3：给标题添加右侧间距，避免和标签栏挤在一起
• flex-grow-1：让Tabset的卡片容器占满剩余的水平空间，确保布局自适应

方案二：自定义Tab标题模板（适合更复杂的布局） #

如果你的标题需要和Tab标签栏融合在同一个容器内，可以通过自定义ngbTabTitle模板来控制结构，再配合Flex布局：

HTML代码示例 #

<div class="card">
  <!-- 在卡片内部添加Flex容器，放置标题和Tabset -->
  <div class="d-flex align-items-center p-3">
    <h3 class="me-3">内部标题</h3>
    <ngb-tabset class="flex-grow-1">
      <ngb-tab>
        <!-- 自定义Tab标题模板 -->
        <ng-template ngbTabTitle>One</ng-template>
        <ng-template ngbTabContent>
          <p>These tabs are 1</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle>Two</ng-template>
        <ng-template ngbTabContent>
          <p>These tabs are 2</p>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</div>

可选样式调整（如果需要修改默认Tab样式） #

如果觉得默认的Tab边框影响布局，可以添加自定义CSS去掉它们：

/* 去掉Tab链接的默认边框 */
ngb-tabset.nav-tabs .nav-link {
  border: none;
}
/* 去掉Tab栏的底部边框 */
ngb-tabset.nav-tabs {
  border-bottom: none;
}

你可以根据自己的实际页面布局选择对应的方案，Flex布局的方式最简洁，利用Bootstrap自带的工具类就能快速实现需求。

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