html - 如何在保持响应的同时将计算器保持在引导程序中并固定？
问题描述
我正在使用引导程序中的计算器。小型设备的设计如下：
但是当我将屏幕尺寸更改为更大尺寸时，它保持这样的状态：
计算器需要在大屏幕中保持其在小屏幕上的大小，同时仍保持响应。
<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 col 卡（这是放置计算器的地方）。卡片是计算器的容器。
<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>
感谢您的任何帮助！
解决方案
我<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>
推荐阅读
- c - 如何从 CSV 文件（用 C 语言）读取和写入寄存器？
- javascript - 小滑块点击监听器注册太晚
- excel - 是否有方法或属性（与 PivotCache / PivotCaches 相关）来确定无法创建数据透视缓存的原因？
- angular - 从 Angular 5 中的 http.get 返回单个项目的 Observable
- javascript - 如何将一位整数数组转换为 2 位或更多位
- windows - 在批处理 FOR /F 命令中使用空格
- highcharts - 如何将数据动态添加到钻取图？
- html - 水平放置带有浮动文本的段落
- c# - 将 JSON 作为资源加载到对象
- kotlin - Kotlin JS：搜索完整课程