目前，我创建的计算器应用程序出现问题。它位于 https://mattfox1388.github.io/Calculator/如果你有兴趣看到我的问题。我一直在修补我的级联样式表，以找到一种将我的按钮保留在计算器面板内的方法。大约 760px 宽度后，按钮将出现在垂直线上，这对移动设备不利。我已经尝试使用媒体查询来调整按钮的大小，更改 Bootstrap 类以包含 row-fluid 以及更多尝试来保持按钮看起来相同。不确定到底是什么为按钮创建了垂直线，但我们将不胜感激。
*{
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box !important;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
display: none !important;
}
@media screen and (max-width: 480px) {
.btn-sq-sm {
padding:2px 4px;
font-size:80%;
line-height: 1;
border-radius:3px;
}
}
body{
font-size:62.5%;
}
html {
background: url(http://media.istockphoto.com/photos/gray-abstract-background-picture-id481056004?k=6&m=481056004&s=612x612&w=0&h=V5AWzkL1wiYvIPi8ekxcY-KB0k_qSxdGMEqSgII6AU0=) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
font-size: 24px;
}
#middleDiv{
position:absolute;
width: 280px;
height: 420px;
z-index: 15;
top: 40%;
left: 50%;
margin: -100px 0 0 -150px;
background-color: #BEBEBE;
border-radius:25px;
padding:20px;
padding-top:30px;
box-shadow: 10px 10px 5px black;
white-space: nowrap;
}
#displayArea{
width: 100%;
height:65px;
text-align:right;
font-size:50px;
padding-right:10px;
padding-left:10px;
background-color:black;
color:#32CD32;
}
.btn-sq-sm {
width: 50px;
max-height: 50px;
height: 100%;
font-size: 10px;
margin-top:10px;
margin-right:5px;
margin-left:-5px;
text-align:center;
}
.btn-spec{
width:185px !important;
}
[data-notify="progressbar"] {
margin-bottom: 0px;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 5px;
}
#uni{
color: transparent;
}最佳答案
无需在媒体查询中应用css，只需添加
<div class="col-xs-3">
<button class="btn btn-sq-sm" ng-click="calc.view(7)">
<p>7</p>
</button>
</div>
将所有 col-sm-3 替换为 col-xs-3 并且在移动设备中也能正确显示
关于css - Bootstrap 问题使按钮响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48237117/