ブートストラップCSS

Question

Iは画像のスプライシングを行なったし、一定の大きさに基づいて、画像の幅を減少/増加させることを試みました。

これは完全に機能します。私は、ブートストラップの内側に、この画像を含めた場合

、その後、画像の高さは、ブートストラップによって上書きされ、画像は高さが減少表示されます。ブートストラップを削除して、フィドルを実行してみてください。出力には元の画像の高さがあります。

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

この問題を解決する方法の参考になる点があります。 ！重要：ここで はここにあなたのCSSコードを使用すると、値を使用しようとすることができますブートストラップによって上書きされている場合はフィドル

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

Answer 1

あなたのソリューションは、box-sizingのデフォルトcontent-box値に依存しています。ブートストラップのグリッドシステムでは、すべての列がbox-sizing:border-boxである必要があります。そのため、境界が設定された列はグリッドを分割せず、残りの列よりも幅が広がります。

実際には、ボーダーを除いて幅が計算された場合、多くの要素がブートストラップのグリッドシステムを破壊する可能性があるため、すべて*にbox-sizing:border-boxを単純に適用しました。要するに

、

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

は...あなたの問題を解決します。 fidlleを更新しました。

Answer 2

がある3 CDN

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

をブートストラップするためのリンクです。例： div {color：red！important;} これが支配的な色になります。