Question

我已经使用精确的css样式创建了元素的模型。他们工作得很好！但我想将它们整合到一个引导程序站点中。当它们发生时，它们会失去我所做的所有美观造型：

是否有办法在引导网站的某些类上不使用 bootstrap css？

例如，这是带有和没有bootstrap的项目：

使用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>

没有引导程序

.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>

谢谢！

Answer 1

你必须编辑一些现有的css来覆盖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>

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

1 个答案: