Problem mit dem Bootstrap-Rendering (Schaltflächenstil in den Dokumenten unterscheidet sich von der lokalen Verwendung)

8

Ich benutze Twitter Bootstrap in einem Projekt und während ich die Dokumentation durchlebe, kam ich auf ein sehr seltsames Problem - wenn das so genannt werden kann.

Auf Ссылка werden viele Schaltflächen nebeneinander angezeigt. Sie scheinen Abstände zu haben, aber der berechnete Stil (in Firefox und Safari, wo ich untersucht habe) war folgender:

%Vor%

Dies sollte NICHT in einem Abstand von 10 ~ px zwischen den einzelnen Schaltflächen dargestellt werden.

Die Auffüllung von 9 / 14px scheint nur zur Anzeige der Knopfform verwendet zu werden.

Wenn ich nun twitter bootstrap für meine eigenen Projekte verwende, scheint der Rand, den ich von der Twitter-Bootstrap-Dokumentations-Site sehe, nicht lokal zu funktionieren - Schaltflächen sind ohne Abstand aneinander geklebt. Dies kann mit einem einfachen lokalen margin behoben werden, aber ich frage mich, warum es sich von der Dokumentation unterscheidet. Außerdem: Warum wird es nicht in Firebug oder den anderen Entwicklertools angezeigt?

    
arvidkahl 08.03.2012, 20:03
quelle

2 Antworten

3

Allen Schaltflächen ist die Eigenschaft display:inline-block hinzugefügt, display:inline-block hängt von der Schriftgröße ab, die von ihrem Container übernommen wird. Wenn Sie die font-size auf den p -Tags setzen, die die Buttons zu 0 einschließen oder die html, body und p -Tags font-size entfernen, können Sie sehen, wie dieser Space entfernt wird.

    
Andres Ilich 08.03.2012, 20:38
quelle
0

Die Lösung ist ziemlich einfach: Die umgebenden <td> s haben einen Stil von padding: 8px plus einen einzelnen Pixelrand. Wenn Sie diese entfernen, wird die wahrgenommene Marge vollständig entfernt.

    
Konrad Rudolph 08.03.2012 20:26
quelle

Tags und Links