引导按钮组文本缩小页面调整大小

问题描述：

当我调整页面我得到这样的：

我能做些什么，不能让按钮文字缩水？也许停止页面在某个限制下调整大小，或者让按钮变成垂直。（默认引导行为相同的行为）

<div class="btn-group btn-group-justified" role="group"> 
    <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-default"> 
     Group A 
    </button> 
    </div> 
    <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-default"> 
     Group B 
    </button> 
    </div> 
    ....

A running example on plnkr

给'白色空间：正常;''到.btn' – Alex

在包含一个页面只有一个按钮组它不起作用，但是，它工作在包含其他内容的页面上，谢谢 – EddyG

答

放下你的按钮向下移动分辨率

@media(max-width: 480px){ 
    .btn-group { 
    display: block !important; 
    width: auto !important; 
    } 
}

答

使用VW（视宽）大小单位设置字体大小里面<button>。只需在您的style.css文件里自定义CSS：

.btn-group > button { 
    font-size: 1.5vw; 
}

为了您的信息1vw = 1个视口宽度的百分比。了解更多关于它here
希望这回答你的问题。

/* Styles go here */ 
 

 
.btn-group > button { 
 
    font-size: 1.5vw; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container" style="margin-top:20px"> 
 
    <div class="btn-group btn-group-justified" role="group"> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group A 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group B 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group C 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group D 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group E 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group F 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

引导按钮组文本缩小页面调整大小

相关推荐