使用Bootstrap添加边框后，圆形按钮变为省略号

Question

我想在我的页面中有一些圆形按钮，并且使用以下代码一切似乎都很好，除非我尝试在启用了Bootstrap的按钮上添加边框。评论＆＃34;边界：10px solid＆＃34; line创建一个合适的圆，但添加边框会将按钮转换为省略号，如下所示。这似乎是一个Bootstrap问题，因为它显示没有它就好了。代码有问题还是Bootstrap中的错误？

＆＃13;

＆＃13;

.round-button {
  width: 15vw;
}
.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 10px solid #cfdcec;
  overflow: hidden;
  background: #4679BD;
  box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
  background: #30588e;
}
.round-button a {
  display: block;
  float: left;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: #e2eaf3;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>my 
<ul class="list-inline text-center">
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果按钮在50px宽，50px高的情况下是完美的圆形，那么添加10px的边框将使其宽60px到60px，同时半径保持不变，从而形成椭圆形状。

在这种情况下，您希望将box-sizing: content-box;应用于具有边框的div，以便将边框视为50x50的一部分（意味着它将变为40x40，其中10px边框使其恢复为50x50）。

见下面的结果。请记住，您必须再次调整它们之间的空间。

.round-button {
  width: 15vw;
}
.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 10px solid #cfdcec;
  overflow: hidden;
  background: #4679BD;
  box-shadow: 0 0 3px gray;
  box-sizing: content-box;
}
.round-button-circle:hover {
  background: #30588e;
}
.round-button a {
  display: block;
  float: left;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: #e2eaf3;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>my 
<ul class="list-inline text-center">
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
</ul>