Wie in Bootstrap Tab CSS der letzten Reiter ändern

Question

ich die margin-right auf meine Bootstrap Registerkarten wie folgt festgelegt haben:

.nav-tabs > li > a { 
    margin-right: 30px; 
} 

Allerdings habe ich die margin-right auf Null auf der letzten Registerkarte festlegen möchten . Ie. Wenn ich drei Registerkarten habe, haben die ersten beiden Registerkarten einen Rand rechts von 30, und die letzte Registerkarte sollte einen Rand rechts von 0 haben.

Irgendwelche Ideen, wie man das macht? Antworten auf einer Postkarte ...

Answer 1

können Sie die CSS :last-of-type pseudoselector verwenden, um dies zu handhaben, da es das letzte Element Ziel wird, die einen bestimmten Typ entspricht, wie erwartet:

.nav-tabs > li:last-of-type > a { 
    margin-right: 0; 
    /* Define any other styles here */ 
} 

Sie können see a working example of this here und unten gezeigt (Farben mit helfen Ziel angeben):

Answer 2

Sie können tun, wie diese

.nav-tabs > li:last-of-type > a { 
    margin-right: 0; 
} 

Answer 3

können Sie versuchen, diese

.nav-tabs > li:last-child > a { 
    margin-right: 0px; 
} 

Answer 4

Wenn das HTML so etwas wie dieses:

<ul class="nav-tabs"> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul> 

Sie könnte das letzte li auswählen und ihm oder seinem a Kind einen Rand-rechts geben:

.nav-tabs > li:last-of-type { 
    margin-right: 0; 
} 
/*OR*/ 
.nav-tabs > li:last-of-type > a { 
    margin-right: 0; 
}