文章/答案/技术大牛

发布

社区首页 >问答首页 >我如何保持一个计算器的引导与修复，同时仍然是响应？

问我如何保持一个计算器的引导与修复，同时仍然是响应？
EN

Stack Overflow用户

提问于 2019-05-14 12:48:18

回答 1查看 224关注 0票数 1

我正在做bootstrap中的一个计算器。小型设备的设计如下：

calculator on small devices

但当我将屏幕尺寸更改为更大尺寸时，它仍然是这样的：

calculator on larger screens

计算器需要保持在较大屏幕的小屏幕上的大小，同时仍然具有响应性。

<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">

带有8col卡的-My主容器(这是放置计算器的地方)。卡是计算器的容器。

<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">&lt;-</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>

谢谢你的帮助！

html

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-14 13:19:42

我再次张贴了<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">&lt;-</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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56123169

复制

相似问题

问我如何保持一个计算器的引导与修复，同时仍然是响应？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何保持一个计算器的引导与修复，同时仍然是响应？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何保持一个计算器的引导与修复，同时仍然是响应？
EN