Beim Hinzufügen der Bootstrap-CSS-Datei wurde die div-Breite automatisch um 2 Prozent erhöht.

Question

Ich habe die Datei bootstrap.min.css (v3.3.5) hinzugefügt, um das Bootstrap-Layout auf einigen Seiten zu aktivieren. Aber auf einer der Seiten habe ich kein Bootstrap-Layout verwendet; Ich benutzte einfach einen div mit seinen Kindern. Ich habe 100% Breite auf die div dynamisch festgelegt. Bei der Einstellung der Breite auf 100% mithilfe der jQuery-Methode width wurde der Inline-Stil des entsprechenden Elements div automatisch auf 102% geändert. Dieses Problem tritt nur auf, während ich den Rahmen für das bestimmte div aktiviere. Können Sie mir vorschlagen, wie Sie dieses Problem lösen können? Ich werde meinen HTML-Code und die jQuery-Methode veröffentlichen, um die Breite festzulegen.

HTML

<div id="parent" style="height:200px; border:1px solid black"> 
.............................. 
</div> 

jQuery Breite dynamisch

$("#parent").width('100%'); 

Restult Div

<div id="parent" style="height: 200px; border: 1px solid black; width: 102%;"> 

zu ändern Hinweis: Dieses Problem tritt nur auf, während die bootstrap.min.css-Datei hinzugefügt wurde und auch, wenn der bestimmte div die Grenze hat.

Answer 1

Dieses Problem tritt nur auf, während ich Grenze für das bestimmte div. Aktiviere.

Sie müssen die folgenden in Ihrem CSS:

*, :before, :after { 
    box-sizing: border-box; 
} 

Box-sizing, MDN:

border-box: Die Breite und Höhe Eigenschaften umfassen die Polsterung und Grenze, aber nicht die Marge.

VS.

content-Box: Dies ist die erste und Standardwert, wie durch die CSS-Standard spezifiziert. Die Eigenschaften width und height werden nur mit dem Inhalt gemessen, nicht jedoch mit dem Füll-, Rand- oder Randabstand.