Bootstrap maxcdn影响我的CSS.kindly帮我解决

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

更新Css类使用Bootstrap 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

Answer 2

好的，这里的问题是box-sizing，因为bootstrap或某些浏览器添加了box-sizing:border-box，其中包含填充和边框包含在元素的总宽度和高度中，它不会增加你用过的圈子。您必须在box-sizing: content-box;中添加.numberCircle。点击box-sizing了解更多信息。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

您可以查看更新的小提琴http://jsfiddle.net/89pd04ot/181/

修改：您可以在Box Sizing

上查看此简单示例

＆＃13;

＆＃13;

.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;
  box-sizing:content-box;
}
.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;