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;} 这将是主色。