Question

我想创建一个css，它可以用于响应按钮，例如bootstrap＆＃34; img-thumbnail＆＃34;。这意味着，无论我改变屏幕尺寸，按钮的高度和宽度都会相应改变。

请帮帮我。

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

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

1 个答案: