时间戳

首页 > 解决方案 > 移动设备中的 Bootstrap 3.3 按钮 css 文本中断

css - 移动设备中的 Bootstrap 3.3 按钮 css 文本中断

问题描述

我有一个按钮问题，其中文本以较小的分辨率中断。我想让它响应，所以它在任何分辨率下都保持不变，我正在使用 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 它会中断，看起来像这样：
使用 370 像素时，它会破裂，看起来像这样

标签： csstwitter-bootstrap-3responsive-design

解决方案

这是给你的一个想法：https ://codepen.io/panchroma/pen/xBZwbr

重要的是你想让你的按钮文本响应视口，一种方法是使用 vw 单位（视口宽度），例如font-size:calc(10px + 1vw);

  • 增加或减少 10px 将控制最小屏幕上的字体大小
  • 增加或减少 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;
  }
}

推荐阅读