響應按鈕縮略圖的高度和寬度

-1

我想創建一個適用於響應式按鈕（如引導「img-thumbnail」）的css。這意味着，無論我更改屏幕大小，按鈕的高度和寬度都會相應更改。響應按鈕縮略圖的高度和寬度

請幫幫我。

來源

2016-03-08 Abu Mohammad Shoyeb

你看着引導媒體查詢：http://getbootstrap.com/css/#grid -media-queries ??? – Ryan

你能告訴我們你們中的一個人嗎？按鈕是圖標，文字還是圖標文字？如果是文本，你是否想讓文字變大？ –

我想做3行4列。在這個單元格內，evry會有相同大小的按鈕（矩形按鈕）。按照按鈕的分辨率大小將會改變。 –

這有點亂，但你在找這樣的東西嗎？

HTML：

<div class="button-panel"> 
    <div class="row button-row"> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 1"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 2"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 3"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 4"> 
     </div> 
    </div> 
    <div class="row button-row"> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 5"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 6"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 7"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 8"> 
     </div> 
    </div> 
    <div class="row button-row"> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 9"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 10"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 11"> 
     </div> 
     <div class="col-xs-3 button-container"> 
      <input type="button" class="btn btn-primary btn-responsive" value="Button 12"> 
     </div> 
    </div> 
</div>

CSS：

.button-panel { 
    height: 100vh; 
} 
.button-row { 
    height: calc(100%/3); 
} 
.button-container { 
    padding: 0; 
    height: 100%; 
} 
.btn-responsive { 
    width: 100%; 
    height: 100%; 
}

Bootply

來源

2016-03-08 22:59:13

響應按鈕縮略圖的高度和寬度

回答

相關問題