html - Bootstrap maxcdn 影响我的 CSS。请帮我解决

Question

我在 jdFiddle 中试过这段代码

我将 .numberCircle 的宽度更改为 35px。

没有 Bootstrap CSS，它工作正常。但是，如果我使用 Bootstrap CSS，它就无法正常工作，如 jsFiddle 输出所示。

没有 Bootstrap CSS:

.numberCircle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 35px;
  padding: 8px;
  font-size: 32px;
  line-height: 1em;
  border: 2px solid #666;
  position: relative;
}
.numberCircle .height_fix {
  margin-top: 100%;
}
.numberCircle .content {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -16px;
  /* Note, this must be half the font size */
}

<div class="numberCircle">
  <div class="height_fix"></div>
  <div class="content">1</div>
</div>
<div class="numberCircle">
  <div class="height_fix"></div>
  <div class="content">100</div>
</div>
<div class="numberCircle">
  <div class="height_fix"></div>
  <div class="content">10</div>
</div>

使用 Bootstrap CSS:

.numberCircle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 35px;
  padding: 8px;
  font-size: 32px;
  line-height: 1em;
  border: 2px solid #666;
  position: relative;
}
.numberCircle .height_fix {
  margin-top: 100%;
}
.numberCircle .content {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -16px;
  /* Note, this must be half the font size */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="numberCircle">
  <div class="height_fix"></div>
  <div class="content">1</div>
</div>
<div class="numberCircle">
  <div class="height_fix"></div>
  <div class="content">100</div>
</div>
<div class="numberCircle">
  <div class="height_fix"></div>
  <div class="content">10</div>
</div>

使用 Bootstrap CSS 的屏幕截图:

我在 Bootstrap CSS 中尝试了相同的代码，并将所有 div 放在单列和单行中，但它仍然无法正常工作。

请帮忙。

Answer 1

使用 Bootstrap CSS 更新 Css 类

.numberCircle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 35px;
  padding: 40px;
  font-size: 32px;
  line-height: 1em;
  border: 2px solid #666;
  position: relative;
}

Demo JsFiddle