我正在引导程序中使用计算器。小型设备的设计如下：
但是当我将屏幕尺寸更改为更大尺寸时，它会像这样：
计算器需要保持小屏幕在大屏幕上的大小，同时仍保持响应状态。
<main role="main" class="container-fluid">
<div class="row" style="margin-top: 100px;">
<div class="col-8 offset-2 col-xs-4">
<div class="card container-fluid">
-我的主容器带有8列卡片（放置计算器的位置）。卡是计算器的容器。
<div class="row mt-3 mb-2">
<div class="col-10 offset-1"><input type="text" class="form-control text-right" value="0"></div>
</div>
计算器的输出
<div class="p-2 mr-3">
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">M</button></div>
<div class="col-3"><button type="button" class="btn">M+</button></div>
<div class="col-3"><button type="button" class="btn">M-</button></div>
<div class="col-3"><button type="button" class="btn">MC</button></div>
</div>
第一个div是包含按钮的行的包装。我这样做是为了对所有这些都应用填充和边距。
这是完整的代码：
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Calculadora</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="calculadora.css">
</head>
<body>
<main role="main" class="container-fluid">
<div class="row" style="margin-top: 100px;">
<div class="col-8 offset-2 col-xs-4">
<div class="card container-fluid">
<div class="row mt-3 mb-2">
<div class="col-10 offset-1"><input type="text" class="form-control text-right" value="0"></div>
</div>
<div class="p-2 mr-3">
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">M</button></div>
<div class="col-3"><button type="button" class="btn">M+</button></div>
<div class="col-3"><button type="button" class="btn">M-</button></div>
<div class="col-3"><button type="button" class="btn">MC</button></div>
</div>
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">x^y</button></div>
<div class="col-3"><button type="button" class="btn">x!</button></div>
<div class="col-3"><button type="button" class="btn">-></button></div>
<div class="col-3"><button type="button" class="btn"><-</button></div>
</div>
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">7</button></div>
<div class="col-3"><button type="button" class="btn">8</button></div>
<div class="col-3"><button type="button" class="btn">9</button></div>
<div class="col-3"><button type="button" class="btn">*</button></div>
</div>
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">4</button></div>
<div class="col-3"><button type="button" class="btn">5</button></div>
<div class="col-3"><button type="button" class="btn">6</button></div>
<div class="col-3"><button type="button" class="btn">/</button></div>
</div>
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">3</button></div>
<div class="col-3"><button type="button" class="btn">2+</button></div>
<div class="col-3"><button type="button" class="btn">1</button></div>
<div class="col-3"><button type="button" class="btn">-</button></div>
</div>
<div class="row text-center my-1 mx-1">
<div class="col-3"><button type="button" class="btn">.</button></div>
<div class="col-3"><button type="button" class="btn">0</button></div>
<div class="col-3"><button type="button" class="btn">=</button></div>
<div class="col-3"><button type="button" class="btn">+</button></div>
</div>
<br>
</div>
</div>
</div>
</div>
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
谢谢您的帮助！
答案 0 :(得分：0)
我将再次发布<main>部分并发表一些评论，希望对您有所帮助。
主要问题是按钮具有特定的width，因此在较大的屏幕尺寸中它们不会占用所有可用空间。添加引导程序类w-100可以解决此问题。我还进行了其他一些小的更改以解决对齐问题，并对这些问题也发表了评论。
让我知道您是否还有其他问题。
<!--
Display flex will make the calculator always be centered.
You could also use position absolute or grid display.
The height set as 100vh will make sure the container takes the
whole screen, but you can remove that if you put this code inside
something else.
-->
<main role="main" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<!-- This will be the fixed size of the calculator -->
<div style="width: 400px;">
<div class="row mt-4">
<div class="col-12">
<!-- You already have container-fluid up there, so this is not doing much... -->
<!-- The documentation recommends using only one container when possible -->
<!-- Also, fluid will make the calculator grow, and you want a fixed size -->
<div class="card">
<!-- Added p-2 to match buttons bellow -->
<div class="row p-2 mt-3 mb-2">
<!-- col-10 and offset-1 here makes the input be "smalled" than the buttons -->
<div class="col-12"><input type="text" class="form-control text-right" value="0"></div>
</div>
<!-- mr-3 here is adding a margin and making things not aligned -->
<div class="p-2">
<!-- Replacing "my-1 mx-1" with "mb-2", since the columns in bootstrap already have a padding -->
<div class="row text-center mb-2">
<!-- w-100 will make the button take all the available space -->
<div class="col-3"><button type="button" class="btn w-100">M</button></div>
<div class="col-3"><button type="button" class="btn w-100">M+</button></div>
<div class="col-3"><button type="button" class="btn w-100">M-</button></div>
<div class="col-3"><button type="button" class="btn w-100">MC</button></div>
</div>
<div class="row text-center mb-2">
<div class="col-3"><button type="button" class="btn w-100">x^y</button></div>
<div class="col-3"><button type="button" class="btn w-100">x!</button></div>
<div class="col-3"><button type="button" class="btn w-100">-></button></div>
<div class="col-3"><button type="button" class="btn w-100"><-</button></div>
</div>
<div class="row text-center mb-2">
<div class="col-3"><button type="button" class="btn w-100">7</button></div>
<div class="col-3"><button type="button" class="btn w-100">8</button></div>
<div class="col-3"><button type="button" class="btn w-100">9</button></div>
<div class="col-3"><button type="button" class="btn w-100">*</button></div>
</div>
<div class="row text-center mb-2">
<div class="col-3"><button type="button" class="btn w-100">4</button></div>
<div class="col-3"><button type="button" class="btn w-100">5</button></div>
<div class="col-3"><button type="button" class="btn w-100">6</button></div>
<div class="col-3"><button type="button" class="btn w-100">/</button></div>
</div>
<div class="row text-center mb-2">
<div class="col-3"><button type="button" class="btn w-100">3</button></div>
<div class="col-3"><button type="button" class="btn w-100">2+</button></div>
<div class="col-3"><button type="button" class="btn w-100">1</button></div>
<div class="col-3"><button type="button" class="btn w-100">-</button></div>
</div>
<div class="row text-center">
<div class="col-3"><button type="button" class="btn w-100">.</button></div>
<div class="col-3"><button type="button" class="btn w-100">0</button></div>
<div class="col-3"><button type="button" class="btn w-100">=</button></div>
<div class="col-3"><button type="button" class="btn w-100">+</button></div>
</div>
<!-- You don't need a <br> here, it is better to use margin or padding in this case -->
</div>
</div>
</div>
</div>
</div>
</main>