Override Bootstrap-Tabelle border-collapse style

Bootstrap hat einen table {border-collapse: collapse; border-spacing:0;} Stil. Ich möchte dies außer Kraft zu setzen, so habe ich eine Klasse erstellen, und wandte sie auf den Tisch in Frage:Override Bootstrap-Tabelle border-collapse style

table.FormGroupContainer 
{ 
    border-collapse: separate; 
    border-spacing: 2px; 
}

aber noch die Grenzen zusammengebrochen bleiben. Der Chrome-Elementinspektor zeigt an, dass das Bootstrap-CSS überschrieben wurde, aber nur das Deaktivieren des Stils im Inspektor ermöglicht einen Rahmenabstand. Ich habe das in IE 11 und Firefox 31.0 beobachtet. Inline-Stile scheinen auch überschrieben zu werden (wie im Chrome-Inspektor gezeigt), haben aber keine Auswirkungen, bis ich den Bootstrap-Stil deaktiviere.

CSS-Reihenfolge scheint auch keinen Unterschied zu machen. Was gibt? Ist die Klasse nicht höher Spezifität?

Quelle

2014-09-30 XyberICE

Normalize.css (Teil von Bootstrap 3) fügt den Kollaps hinzu. Die CSS-Ladereihenfolge macht immer einen Unterschied. Wenn der Stil auf die Tabelle angewendet wird, wird es funktionieren, vorausgesetzt, dass es nach dem Bootstrap css ist und kein anderer css damit in Konflikt steht: http://jsbin.com/bavogi/1/edit – Christina

@Christina Ok, sagen wir, Bootstrap's CSS wird zuletzt geladen . Erhöht die höhere Spezifität von 'table.FormGroupContainer' on:'

'den FormGroupContainer, um die CSS der Bootstrap-Tabelle zu überschreiben? – XyberICE

Ja, wenn das alles ist. Denken Sie daran, dass dies normalize.css ist, das Teil von Bootstrap ist, aber separat verwaltet wird. – Christina

Load Bestellung war ein Problem hier. Mein Stylesheet wurde geladen vor Bootstrap. Ich fügte der Regel in meinem Stylesheet eine größere Spezifität hinzu, die es erlaubte, mit der CSS-Datei table von Bootstrap zu konkurrieren. Danke @Christina.

Quelle

2014-10-16 19:09:18 XyberICE

Override Bootstrap-Tabelle border-collapse style

Antwort

Verwandte Themen