Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Error in the selector of the tabs.

Hello. Apparently the selector of _tabs.sass contains an error in its selector, affecting all children of lists. Assign a margin to the first element of all the li that exists within the tab. Modify the following code:
.classic-tabs {
  white-space: nowrap;
  overflow-x: auto;
  border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
  @media (min-width: 62rem) {
    overflow-x: hidden;
  }
  li {
    @media (min-width: 62em) {
      flex: inherit;
    }
    a {
      display: block;
      padding: $classic-tabs-padding-y $classic-tabs-padding-x;
      font-size: $classic-tabs-font-size;
      text-transform: uppercase;
      color: $classic-tabs-color;
      text-align: center;
      border-radius: 0;
      &.active {
        border-bottom: $classic-tabs-li-a-active-border-bottom;
        color: $white;
      }
    }
    @media (min-width: 62em) {
      &:first-child {
        margin-left: $classic-tabs-margin-left;
      }
    }
  }
For this:
.classic-tabs {
  white-space: nowrap;
  overflow-x: auto;
  border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
  @media (min-width: 62rem) {
    overflow-x: hidden;
  }
  & > li {
    @media (min-width: 62em) {
      flex: inherit;
    }
    a {
      display: block;
      padding: $classic-tabs-padding-y $classic-tabs-padding-x;
      font-size: $classic-tabs-font-size;
      text-transform: uppercase;
      color: $classic-tabs-color;
      text-align: center;
      border-radius: 0;
      &.active {
        border-bottom: $classic-tabs-li-a-active-border-bottom;
        color: $white;
      }
    }
    @media (min-width: 62em) {
      &:first-child {
        margin-left: $classic-tabs-margin-left;
      }
    }
  }

Regards!

Marta Wierzbicka staff answered 6 years ago


Hi, thank you for the solution. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags