Bootstrap CSS搞亂圖像（邊框圖像）

Question

我做了一個圖像拼接，並嘗試增加/減少基於特定尺寸的圖像寬度。

這個效果很好。

當我在bootstrap中包含此圖像時，圖像高度被bootstrap覆蓋，圖像高度降低。嘗試刪除bootstrap並運行小提琴。輸出將具有原始圖像高度。

<div class="tireImageFirst" style="height: 12px; width:100px;"><span style="position:relative; top:25px; left:80px; font-size:x-small">14'12''</span></div> 

就如何解決這一問題將有助於任何指針。 這裏是鏈接引導3 CDN

http://getbootstrap.com/getting-started/

這裏是小提琴

https://jsfiddle.net/haribalaji/3oqsyxrq/

Answer 1

您的解決方案取決於box-sizing的默認content-box值。 Bootstrap的網格系統要求所有列都有box-sizing:border-box，以便設置邊框的列不會打破網格，比其他網格更寬。

事實上，如果寬度計算不包括邊框，很多元素都有可能破壞Bootstrap的網格系統，所以他們只需將box-sizing:border-box應用到*。

總之，

.tireImageFirst { 
    box-sizing: content-box; 
} 

...會解決您的問題。更新了fidlle。

Answer 2

如果你的CSS代碼是通過引導，你可以嘗試使用值覆蓋：很重要的。例如： div {color：red！important;} 這將是主色。