Currently, I am facing some challenges styling three b-tabs within Bootstrap in Vue. The issue arises when the screen width decreases, causing them to behave undesirably as shown here. My ultimate goal is for the tabs to respond correctly like this as the window size changes. Upon inspecting the elements, I discovered the culprit was the flex-wrap:wrap property. To achieve my desired outcome, I have attempted to override it by including the following code snippet to my style:
.nav {
display: flex;
flex-wrap: nowrap !important;
}
Despite this intervention, the tabs are still stacking improperly when the screen narrows down.
Does anyone have any suggestions on how to effectively override the default Bootstrap styling in this scenario?