【发布时间】：2017-10-30 09:55:21
【问题描述】：
我创建了具有精确 css 样式的元素模型。 他们工作得很好！但我想将它们合并到一个引导站点中。 当它们发生时，它们会失去我制作的所有漂亮样式：
- 有没有办法在引导站点中的某些类上不使用引导 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: -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>没有引导
.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>谢谢！
【问题讨论】：
-
您可以使用
!important规则覆盖引导样式，但我会谨慎使用它。 -
@MasterYoda 并不是一个使用
!important的好建议，而是添加一个类以使其覆盖更具体的css 选择器。 -
@MasterYoda 即使它可以工作，它也会很快变得混乱。最好使用 CSS 选择器的顺序来更改布局，而不是用
!important覆盖。 -
@mint 你可以将你的自定义css添加到你声明为
pkmn-name的类中 -
@Dejan.S 这就是为什么我说要谨慎使用它。我从来没有告诉 OP 在他们喜欢的任何地方使用它。
标签： html css twitter-bootstrap