响应按钮缩略图的高度和宽度

Question

我想创建一个适用于响应式按钮（如引导“img-thumbnail”）的css。这意味着，无论我更改屏幕大小，按钮的高度和宽度都会相应更改。

请帮帮我。

Answer 1

这有点乱，但你在找这样的东西吗？

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