Bootstrap 3.3按钮CSS文本在手机中中断

Question

我在按钮上遇到问题，该按钮以较小的分辨率中断文本。我想使其具有响应性，因此在任何分辨率下都保持不变，并且我使用的是Bootstrap 3.3

<button ng-show="vm.account.state === 'paused'" class="bm-badge bm-badge-danger "  ng-click="vm.corrigir()">
            <i class="fa fa-play"></i> Iniciar
        </button>

外观（高分辨率的屏幕截图）：

370px的像素会破裂，如下所示：

Answer 1

这是给您的一个主意：https://codepen.io/panchroma/pen/xBZwbr

重要的一点是，您希望按钮文本响应视口，而实现此目的的一种方法是使用vw单位（视口宽度） 例如font-size:calc(10px + 1vw);

• 增加或减少10像素将控制最小屏幕上的字体大小
• 增大或减小1vw将控制字体大小对视口宽度的响应

希望这会有所帮助！

---

HTML

<button  class="btn btn-danger ">
 <i class="fa fa-play"></i> Iniciar
</button>  

CSS

.btn{
  font-size:calc(10px + 1vw); /* the important bit */
  padding:10px 20px;
  border-radius:calc(10px + 2vw);
  box-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 )
}


/* Optional: if space is tight, hide play icon at small viewport */

.fa.fa-play{
  display:none;
}

@media (min-width: 350px) {
  .fa.fa-play{
    display:inline;
  }
}