CSS-从某些元素中删除引导样式

Question

I've created mockups of elements with precise css styling. They work great! But I want to incorporate them into a bootstrap site. When they happens, they lose all the nice looking styling I've made:

• Is there a way to not use bootstrap css on certain classes within a bootstrap site?

For example, here's the item with and without bootstrap:

with bootstrap:

 .pkmn-pc { color: white; margin: 10px; display: inline-block; } .pkmn-summary, .pkmn-info { display: table-cell; vertical-align: middle; height: 60px; } .pkmn-summary { width: 193px; background: #745fb5; background: linear-gradient(15deg, #745fb5, #9a6dbb); border-radius: 5px 0 0 5px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); white-space: nowrap; border-bottom: solid 5px grey; text-align: left; padding-left: 5px; } .pkmn-summary:after { content: ''; position: relative; left: -182px; bottom: -31px; height: 5px; background: green; /**width: 73%;**/ display: inline-block; border-radius: 0 0 0 5px; } .pkmn-summary:after { width: 73%; } .pkmn-info { background: #333538; border-radius: 0 5px 5px 0; width: 70px; text-align: center; } .pkmn-outer { padding-bottom: 2px; } .pkmn-inner { display: inline-block; width: 3px; } .pkmn-sprite { vertical-align: middle; } .pkmn-name { font-size: 1.2em; } .pkmn-lvl { font-size: 0.8em; display: block; } .crown { padding-top: 5px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="pkmn-pc"> <div class="pkmn-summary"> <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> <code class="pkmn-name">15Characterssss</code> </div> <div class="pkmn-info"> <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> <div class="pkmn-outer"> <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"> <div class="pkmn-inner"></div> <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> </div> <code class="pkmn-lvl">lvl 100</code> </div> </div> 

without bootstrap

 .pkmn-pc { color: white; margin: 10px; display: inline-block; } .pkmn-summary, .pkmn-info { display: table-cell; vertical-align: middle; height: 60px; } .pkmn-summary { width: 193px; background: #745fb5; background: linear-gradient(15deg, #745fb5, #9a6dbb); border-radius: 5px 0 0 5px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); white-space: nowrap; border-bottom: solid 5px grey; text-align: left; padding-left: 5px; } .pkmn-summary:after { content: ''; position: relative; left: -182px; bottom: -31px; height: 5px; background: green; /**width: 73%;**/ display: inline-block; border-radius: 0 0 0 5px; } .pkmn-summary:after { width: 73%; } .pkmn-info { background: #333538; border-radius: 0 5px 5px 0; width: 70px; text-align: center; } .pkmn-outer { padding-bottom: 2px; } .pkmn-inner { display: inline-block; width: 3px; } .pkmn-sprite { vertical-align: middle; } .pkmn-name { font-size: 1.2em; } .pkmn-lvl { font-size: 0.8em; display: block; } .crown { padding-top: 5px; } 

 <div class="pkmn-pc"> <div class="pkmn-summary"> <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> <code class="pkmn-name">15Characterssss</code> </div> <div class="pkmn-info"> <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> <div class="pkmn-outer"> <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"> <div class="pkmn-inner"></div> <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> </div> <code class="pkmn-lvl">lvl 100</code> </div> </div> 

thanks!

Answer 1

You have to edit some of your existing css to overwrite bootstrap css

 .pkmn-pc { color: white; margin: 10px; display: inline-block; } .pkmn-summary, .pkmn-info { display: table-cell; vertical-align: middle; height: 60px; } .pkmn-summary { width: 193px; background: #745fb5; background: linear-gradient(15deg, #745fb5, #9a6dbb); border-radius: 5px 0 0 5px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); white-space: nowrap; border-bottom: solid 5px grey; text-align: left; padding-left: 5px; } .pkmn-summary:after { content: ''; position: relative; left: -197px; bottom: -35px; height: 5px; background: green; /**width: 73%;**/ display: inline-block; border-radius: 0 0 0 5px; } .pkmn-summary:after { width: 73%; } .pkmn-info { background: #333538; border-radius: 0 5px 5px 0; width: 70px; text-align: center; } .pkmn-outer { padding-bottom: 2px; } .pkmn-inner { display: inline-block; width: 3px; } .pkmn-sprite { vertical-align: middle; } .pkmn-name { font-size: 1em; background-color: transparent !important; color: white; } .pkmn-lvl { font-size: 0.6em; display: block; background-color: transparent; color: white; } .crown { padding-top: 5px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="pkmn-pc"> <div class="pkmn-summary"> <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> <code class="pkmn-name">15Characterssss</code> </div> <div class="pkmn-info"> <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> <div class="pkmn-outer"> <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"> <div class="pkmn-inner"></div> <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> </div> <code class="pkmn-lvl">lvl 100</code> </div> </div>