如何修改Bootstrap非激活标签页颜色？现有代码未实现需求

Hey there! I see you've nailed the styling for active, focused, and hover states of your Bootstrap nav pills, but you're stuck on customizing the inactive (default) tab items. Let's fix that right away.

Your current CSS only targets the active, focused, and hovered states—so the regular, unselected tabs are still using Bootstrap's default styles. To tweak them, you need to add a rule for the base .nav-pills > li > a selector, which targets all non-active tabs by default.

Here's an updated version of your CSS with the inactive state styling included:

/* Style for inactive (default) nav pill tabs */
.nav-pills > li > a {
  background-color: #f8f9fa; /* Replace with your preferred inactive background color */
  border-color: #dee2e6; /* Replace with your preferred inactive border color */
  color: #6c757d; /* Replace with your preferred inactive text color */
  transition: all 0.3s ease; /* Optional: adds smooth hover transition */
}

/* Your existing styles for active, focused, and hover states */
.nav-pills > li.active > a, 
.nav-pills > li.active > a:focus, 
.nav-pills > li > a:hover { 
  background-color: #F47321 !important; 
  border-color: #FFFFFF !important; 
  color: #FFFFFF; 
}

A quick tip: Try to use !important sparingly if you can. You might be able to override Bootstrap's styles by boosting your selector specificity (like adding a parent class such as .custom-nav-pills > li > a) instead of relying on !important. But if Bootstrap's default styles still take precedence, your current use of !important works perfectly fine.

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