Question

目前我遇到了一个我创建的计算器应用程序的问题。如果您有兴趣查看我的问题，它位于https://mattfox1388.github.io/Calculator/。我一直在修补我的级联样式表，找到一种方法将我的按钮保持在计算器面板内。大约760px宽度后，按钮将显示在垂直线上，这对移动设备不利。我已经尝试使用媒体查询来调整按钮的大小，将引导类更改为包含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;
}

Answer 1

这是因为您使用了 DATE_FLAG ，直到 CASE_NUMBER ，之后它变为100％宽度。

因此，请尝试使用 col-sm-3 代替 width 768px

<强> More help on bootstrap grid

col-xs-3

Answer 2

无需在媒体查询中应用css，只需添加

即可

col-sm-3

将所有col-sm-3替换为col-xs-3并在移动设备中正确显示

Bootstrap问题制作按钮响应

2 个答案: