如何使导航栏活动选项卡的高度比其他选项卡更大？

问题描述 投票：0回答：1

我想要实现的目标的示例：

这是我的 HTML 代码：

<ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist">
  <li class="nav-item" style="margin-left: -1px">
    <button
      class="nav-link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
    >
      About
    </button>
  </li>
  <li class="nav-item">
    <button
      class="nav-link"
      id="personalize-tab"
      data-bs-toggle="tab"
      data-bs-target="#personalize"
      type="button"
    >
      Personslize
    </button>
  </li>
  <li class="nav-item">
    <button
      class="nav-link"
      id="http-proxy-tab"
      data-bs-toggle="tab"
      data-bs-target="#http-proxy"
      type="button"
    >
      Http Title
    </button>
  </li>
  <li class="nav-item" id="data-processor-display" style="display: none">
    <button
      class="nav-link"
      id="data-processor"
      data-bs-toggle="tab"
      data-bs-target="#data-processor-click"
      type="button"
    >
      DSP Titel
    </button>
  </li>
  <li class="nav-item" id="mate-setting-display" style="display: none">
    <button
      class="nav-link"
      id="mate-settings"
      data-bs-toggle="tab"
      data-bs-target="#mate-setting-click"
      type="button"
    >
      MS Title
    </button>
  </li>
  <li class="nav-item" id="mate-manage-display" style="display: none">
    <button
      class="nav-link"
      id="mate-manage"
      data-bs-toggle="tab"
      data-bs-target="#mate-manage-click"
      type="button"
    >
      MM Title
    </button>
  </li>
</ul>

这是我尝试过的CSS：

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: rgb(5, 5, 5);
  background-color: rgb(249, 249, 249);
  border: 1px solid rgb(198 198 198);
  height: 22px;
  border-bottom: 1px solid transparent;
}

我正在使用引导程序，

data-bs-toggle="tab"
。
我希望活动选项卡比其他选项卡高一点。

html css bootstrap-4 navbar nav
1个回答
0
投票

您可以通过在活动选项卡上使用负边距并增加底部填充相同的精确距离来实现此目的。

示例：

.nav-link.active {
  margin-top: -2px;
  padding-bottom: calc(0.5rem + 2px)
}

在上面的CSS中，

2px
是活动项目向上移动的距离，不影响其他任何东西。

注意，我将 

padding-bottom
设置为 
calc(0.5rem + 2px)
，因为选项卡控件上的默认引导底部填充是 
0.5rem
。如果您使用的主题将该填充设置为不同的值，则需要进行相应的调整。

看到它工作了：

body {
  padding-top: 2rem;
}
.nav-link.active {
  margin-top: -2px;
  padding-bottom: calc(0.5rem + 2px)
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
  crossorigin="anonymous"
/>

<body>
  <div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="home-tab"
          data-toggle="tab"
          data-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-toggle="tab"
          data-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-toggle="tab"
          data-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>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"
  ></script>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.