试图对齐我的按钮以占用容器中的所有空间…只有底部行没有这样做

我正试图将我所有的按钮排成一行，使一个计算器的迷你个人项目学习…然而，由于enter较长，它占用了更多的空间。我如何排列所有的按钮?

#entry {
background-color: white;
border: solid black 2px;
margin-bottom: 0.25em;
width: fit-content;
flex-grow: 1;
}
.calc-container {
width: 20%;
justify-content: flex-start;
}
.row {
background-color: grey;
}
.btn-primary {
border-radius: 0;
flex-grow: 4;
}
.btn-info {
border-radius: 0;
flex-grow: 4;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My personal calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="calc.css">
</head>
<body>
<h1>My personal calculator project!</h1>
<div class="container text-center">
<div class="calc-container">
<div class="row">
<form name="calc">
<input type="text" id="entry" </form>
</div>
<div class="row">
<button type="button" class="btn btn-primary">7</button>
<button type="button" class="btn btn-primary">8</button>
<button type="button" class="btn btn-primary">9</button>
<button type="button" class="btn btn-info">-</button>
</div>
<div class="row">
<button type="button" class="btn btn-primary">4</button>
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-info">+</button>
</div>
<div class="row">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-info">Enter</button>
</div>
</div>
</div>

<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://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

我的HTML在这里。我正在使用bootstrap flex box以及这里的按钮元素，我没有看到任何错误，所以任何帮助将不胜感激。

-您只需要将col-3添加到12-grid系统上的所有按钮上作为引导工作，因此我们可以拥有col-3的4 columns和3*4=12。

我也删除了不必要的css。

#entry {
background-color: white;
border: solid black 2px;
margin-bottom: 0.25em;
width: fit-content;
}
.row {
background-color: grey;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My personal calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="calc.css">
</head>
<body>
<h1>My personal calculator project!</h1>
<div class="container text-center">
<div class="calc-container">
<div class="row">
<div class="col-12 px-0">
<form name="calc">
<input type="text" class="w-100" id="entry"> </form>
</div>
</div>
<div class="row">
<button type="button" class="col-3 btn btn-primary">7</button>
<button type="button" class="col-3 btn btn-primary">8</button>
<button type="button" class="col-3 btn btn-primary">9</button>
<button type="button" class="col-3 btn btn-info">-</button>
</div>
<div class="row">
<button type="button" class="col-3 btn btn-primary">4</button>
<button type="button" class="col-3 btn btn-primary">5</button>
<button type="button" class="col-3 btn btn-primary">6</button>
<button type="button" class="col-3 btn btn-info">+</button>
</div>
<div class="row">
<button type="button" class="col-3 btn btn-primary">1</button>
<button type="button" class="col-3 btn btn-primary">2</button>
<button type="button" class="col-3 btn btn-primary">3</button>
<button type="button" class="col-3 btn btn-info">Enter</button>
</div>
</div>
</div>

<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://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

相关内容

最新更新

热门标签：