如何在屏幕调整到较小的屏幕时自动调整按钮大小？

.beaker { 
 
     max-width:100%; 
 
     height: auto; 
 
     width: auto; 
 

 
    }

<div class="col-xs-1"> 
 
    <img id="img" width="60px" src="images/a1.png" class="img-rounded" /> 
 
</div> 
 
<div class="col-xs-2"> 
 
    <br/> 
 
    <br/> 
 
    <button id="upper" type="button" class="btn btn-primary beaker">IP > Ksp</button> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <button id="middle" type="button" class="btn btn-primary beaker">IP = Ksp</button> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <button id="reset" type="button" class="btn btn-primary beaker">IP < Ksp</button> 
 
</div>

有什么办法我也可以使按钮自动调整屏幕时，得到完全相同的斑点小，因为我把屏幕大小调整前。我试图把宽度设置为100％，但它仍然不起作用。我认为它的原因是引导网格列，这就是为什么按钮不会调整大小。请帮忙。

来源

2017-09-22 Nur Shaherra

利用'@ media'查询 –

你为什么不尝试使用媒体？你只需要设置宽度和高度。然后，当你调整你的屏幕。按钮的大小也会改变

来源

2017-09-22 08:21:44

使用media queries。您可以在屏幕变小时调整按钮大小。这是一种方法。

@media (max-width: 768px) { 
 
    .btn { 
 
    padding: 2px 4px; 
 
    font-size: 80%; 
 
    line-height: 1; 
 
    border-radius: 3px; 
 
    } 
 
} 
 

 
@media (min-width: 769px) and (max-width: 992px) { 
 
    .btn { 
 
    padding: 4px 9px; 
 
    font-size: 90%; 
 
    line-height: 1.2; 
 
    } 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="col-xs-1"> 
 

 
    <img id="img" width="60px" src="images/a1.png" class="img-rounded" /> 
 

 

 
</div> 
 
<div class="col-xs-2"> 
 
    <br/> 
 
    <br/> 
 

 

 
    <button id="upper" type="button" class="btn btn-primary beaker">IP > Ksp</button> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <button id="middle" type="button" class="btn btn-primary beaker">IP = Ksp</button> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 

 

 
    <button id="reset" type="button" class="btn btn-primary beaker">IP < Ksp</button> 
 

 
</div>

输出调整大小

来源

2017-09-22 08:22:37 Hash

该按钮的确会根据屏幕大小调整而改变，但其中的文字并不遵循按钮大小..所以当按钮变小时它就不在按钮中了 –

@NurShaherra i checked在铬上它工作正常。你也可以尝试像'0.90em'字体。 – Hash

我认为这将是很好用引导。当你使用bootstrap时，很容易管理Button的大小。

您可以使用md，sm，xs，lg作为按钮类。

来源

2017-09-22 08:23:30

如何在屏幕调整到较小的屏幕时自动调整按钮大小？

回答

相关问题