我想对齐按钮以响应Web应用程序。屏幕较大时，按钮已正确对齐：
这里是按钮未正确对齐时的捕获内容：
这是示例：
body{
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
#message_bienvenue{
margin: 10px;
text-align: center;
width: 100%;
}
#bouton_mission{
margin: 0 auto;
}
#livraison_chauffeur{
margin: 0 auto;
padding-top: 20px;
width: 90%;
}
.container-fluid{
margin-top: 70px !important;
}
/* BOUTON */
.btn-circle.btn-xl {
position: relative;
width: 70px;
border-radius: 45px;
font-size: 34px;
padding: 0px;
margin: 5px
}
.btn-circle.btn-xl img{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
background-color: rgba(255, 255, 255, 0);
}
.text-button{
margin-top: 40px;
}
.text-button label{
font-size: 11px;
}
.block-mission{
text-align: center;
}
.block-mission label{
margin-top: 20px;
}
.btn-1 {
background-image: url("https://pngimage.net/wp-content/uploads/2018/06/icon-ok-png-2.png");
background-size: contain;
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.btn-2 {
background-image: url("https://pngimage.net/wp-content/uploads/2018/06/icon-ok-png-2.png");
background-size: contain;
background-repeat: no-repeat;
width: 70px;
height: 70px;
}
.btn-3 {
background-image: url("https://pngimage.net/wp-content/uploads/2018/06/icon-ok-png-2.png");
background-size: contain;
background-repeat: no-repeat;
width: 40px;
height: 40px;
}<!doctype html>
<html lang="fr">
<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="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 0px !important">
<form method="post" action="requetes/page.php" role="form" id="formulaire">
<h3>Créer mission :</h3>
<hr/>
<input class="form-control" id="numero_bon" type="number" min="0" name="numero_bon" placeholder="Numéro de bon de livraison" required>
<hr/>
<input class="form-control" id="nom_client" name="nom_client" type="text" placeholder="Client" required>
<hr/>
<input class="form-control" id="adresse_client" name="adresse_client" type="text" placeholder="Adresse" required>
<hr/>
<input class="form-control" id="volume_livraison" type="number" name="volume_livraison" placeholder="M³" pattern="[0-9]+([\.,][0-9]+)?" step="0.01" formnovalidate required>
<hr/>
<input class="form-control" id="nom_centrale"type="text" name="nom_centrale" placeholder="Centrale" required>
<hr/>
<span class="label label-default">Zone</span>
<select class="form-control form-control-sm" id="zone" type="text" name="zone">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select>
<hr/>
<div class="container-fluid" style="margin-top: 0 !important">
<div class="row d-flex justify-content-around">
<div class="d-flex flex-column align-items-center block-mission">
<button class="btn btn-circle btn-small btn-1" id="creer_mission_replacee" name="type_voyage" value="Replacé" type="submit">
</button>
<label>Voyage validé replacé</label>
</div>
<div class="d-flex flex-column align-items-center block-mission">
<button class="btn btn-circle btn-small btn-2" id="creer_mission" name="type_voyage" value="Livré" type="submit">
</button>
<label>Livraison effectuée validée</label>
</div>
<div class="d-flex flex-column align-items-center block-mission">
<button class="btn btn-circle btn-small btn-3" id="creer_mission_annulee" name="type_voyage" value="Annulé" type="submit">
</button>
<label>Voyage annulé</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>有人可以修复我的代码吗？我不知道该怎么做？要解决的问题：单击Run code snippet-> Full page->将浏览器边框减小到最小。
对于btn-circle类使用此代码
.btn-circle
{
width: 40px;
padding: 0;
margin: auto;
height: 40px;
}
希望这对您有帮助
如果我正确地阅读了您的问题，听起来您不希望按钮失去对齐，因为您希望看到它们像在桌面视图中一样排成一行。如果是这样，则可以通过像这样向'.justify-content-around'类添加属性和值来解决此问题。
.justify-content-around {
flex-wrap: nowrap;
}但是，您可能希望尝试对按钮进行更便于移动的对齐，这可能会有所改变，但是也许只是稍微缩小一下移动视图中的按钮也会有所帮助。如果是这种情况，与我的结合起来，Udayavani的上述回答将非常有用。