在 Html/CSS/Bootstrap 4.0 中设计计算器

Question

我正在尝试在 CSS 中创建我的第一个项目 - 一个计算器。但是我在将单元格放在一个完美的列中时遇到了问题。我希望所有单元格的大小都相同。（除了“=”）如果你能给我一些建议就好了。提前致谢。我已经走到这一步了：

计算器

<div class ="btn-group-vertical" role="group" aria-label="Vertical button group">
    <div class="btn-group btn-group-lg" role="group" aria-label="First Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="7"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="8"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="9"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Second Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="4"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="5"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="6"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="-"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Third Row">

        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="1"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="2"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="3"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="*"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Fourth Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="0"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="."></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+/-"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="/"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="="></input>
    </div>
</div>

Answer 1

您可以使用 CSS 网格来创建计算器。这些数字将充当相同宽度的不同行和列元素。对于“=”，如果您希望它具有更大的宽度，则可以将其跨越多列；如果您想要更高的高度，则可以将其跨越多行。

Answer 2

请看一下希望对您有所帮助。如果还有任何问题或疑问，请提出。

.btn{
  width:50px;
  min-width:50px; /* this for smallest devices */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class ="btn-group-vertical" role="group" aria-label="Vertical button group">
    <div class="btn-group btn-group-lg" role="group" aria-label="First Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="7"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="8"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="9"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Second Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="4"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="5"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="6"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="-"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Third Row">

        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="1"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="2"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="3"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="*"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Fourth Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="0"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="."></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+/-"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="/"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="="></input>
    </div>
</div>

Answer 3

对于完美的专栏，您可以使用网格系统：

<div class="row">
    <div class ="col-2">
        <div class="row">
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="7"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="8"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="9"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="+"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="4"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="5"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="6"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="-"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="1"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="2"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="3"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="*"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="0"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="."></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="+/-"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="/"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-12" waves-effect value="="></input>
        </div>
    </div>
</div>

在 Html/CSS/Bootstrap 4.0 中设计计算器

Styling a Calculator in Html/CSS/Bootstrap 4.0

html

css

calculator

bootstrap-4

计算器