html - Bootstrap添加边框后圆形按钮变成省略号

Question

我想在我的页面中有一些圆形按钮，使用下面的代码一切看起来都很好，除非我尝试在启用 Bootstrap 的情况下向按钮添加边框。注释“border: 10px solid”线会创建一个合适的圆，但添加边框会将按钮转换为省略号，如下所示。这似乎是一个 Bootstrap 问题，因为没有它它显示得很好。代码有问题还是 Bootstrap 中的错误？

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

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

Answer 1

如果您的按钮在 50px 宽 x 50px 高时是完美的圆形，添加 10px 的边框将使其宽 60px x 60px 高，同时半径保持不变，从而创建椭圆形。

p>

在这种情况下，您希望将 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>