引導按鈕組文本縮小頁面調整大小

當我調整頁面我得到這樣的：

我能做些什麼，不能讓按鈕文字縮水？也許停止頁面在某個限制下調整大小，或者讓按鈕變成垂直。（默認引導行爲相同的行爲）

<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

來源

2017-04-01 EddyG

給'白色空間：正常;''到.btn' – Alex

在包含一個頁面只有一個按鈕組它不起作用，但是，它工作在包含其他內容的頁面上，謝謝 – EddyG

放下你的按鈕向下移動分辨率

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

來源

2017-04-01 07:30:23

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

來源

2017-04-01 07:28:27

引導按鈕組文本縮小頁面調整大小

回答

相關問題