【问题标题】:Bootstrap 3.3 button css text break in mobile移动设备中的 Bootstrap 3.3 按钮 css 文本中断
【发布时间】:2019-07-22 18:16:02
【问题描述】:

我遇到了一个按钮问题,该按钮的文本以较小的分辨率中断。我想让它响应,所以它在任何分辨率下都保持不变,我正在使用 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>

它的外观(更高分辨率的屏幕截图):

使用 370 像素时,它会中断,如下所示:

【问题讨论】:

    标签: css twitter-bootstrap-3 responsive-design


    【解决方案1】:

    这里有一个想法给你: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;
      }
    }
    

    【讨论】:

    • 感谢您的帮助。不幸的是,我尝试在按钮显示中使用它没有用:flex;但现在是图标和按钮与文本和按钮顶部粘在一起。 ://
    • 可以分享一下页面的网址吗?您发布的代码中没有足够的细节来重现您所看到的内容。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-01-30
    • 2018-07-08
    • 2015-04-27
    • 1970-01-01
    • 1970-01-01
    • 2018-06-19
    • 2022-07-25
    相关资源
    最近更新 更多