If you add Boostrap’s CSS to a layout that’s already working just fine, you may find that things shift in strange, subtle ways. And even not-so-subtle ones, like basically your entire layout breaking.<\/p>\n
Generally, this seems to manifest as block-level elements becoming too small, and clipping out content inside their bounding boxes. A div that used to be tall enough to hold a a 40-pixel-high navigational icon suddenly cuts off the bottom half of it. The right-floating aside that used to look just right<\/em> now looks oddly too-narrow — and you don’t have a screen-shot of its old appearance, but you could swear<\/em> the line-breaks are in different places. Like, maybe, there’s not quite as much text on each line anymore?<\/p>\n You’re not going insane. The problem is that you originally built your layout using the W3C box model, where And then you added bootstrap.css, which includes And now your layout is using the IE Quirks-mode box model, in which So if you weren’t expecting<\/em> to have all your boxes suddenly be measured from border to border instead of just across the content itself, then you might not consider this “intuitive”. But now, hopefully, you’ll at least recognize<\/em> the problem and know how to fix it.<\/p>\n This also serves as a lesson in the importance of knowing what the heck is inside the third-party libraries and tools you’re using<\/strong>. Just blindly including without understanding what they do (or how they do it) will lead to problems down the road. (In this case, a scant few feet down the road!) They’re kind of like abstractions that way — they have a strong tendency to leak<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" If you add Boostrap’s CSS to a layout that’s already working just fine, you may find that things shift in strange, subtle ways. And even not-so-subtle ones, like basically your entire layout breaking. Generally, this seems to manifest as block-level elements becoming too small, and clipping out content inside their bounding boxes. A div that used […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7,58,69,74],"_links":{"self":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/644"}],"collection":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":2,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}width<\/code> declarations apply only to the content<\/em> of a box<\/strong> and the padding, border and margin<\/em> are all considered to be “extra”, outside that width.<\/p>\n* {box-model: content-box;}<\/code> in it.<\/p>\nwidth<\/code> applies to the visible parts of a box<\/strong>, meaning the padding and border as well as the content<\/em>. This is arguably much more intuitive than the W3C model, but it can also be argued that once you’re no longer sucking at your mother’s nipple<\/a>, “intuitive” just means “whatever you’ve been trained to expect”.<\/p>\nbox-model: content-box<\/code> reset. Now that support for content-box is widespread, lots<\/em> of frameworks and CSS resets are using it. Bootstrap is just the one that happened to actually cause this problem<\/em> in my actual life recently. In case you were thinking this seemed like an unlikely occurrence.<\/div>\n