我有两个按钮，当在响应式屏幕中时，它们需要水平居中，一个在彼此下方，而在较大的屏幕中，它们需要一个并排居中。
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
section.masthead2{
background-color:orange;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:80vh;
position:relative;
}
.gear {
height: 50px;
}
.botonhome{
background-color:#eb6626;
color: #ffffff;
padding-left:2em;
padding-right:2em;
font-family:'Josefin Sans', sans-serif;
font-weight:500;
border-radius:0.5em;
font-size:1.2em;
width:200px;
}
/*.contain{
position:absolute;
left:50%;
right:0;
transform:translateX(-50%);
bottom:0;
}*/
</style>
</head>
<body>
<section class="container-fluid masthead2 d-flex align-items-center justify-content-center">
<div class="container">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1 class="textoprincipal text-center">Lorem Ipsum is simply dummy text of the printing</h1>
</div>
<div class="col d-sm-flex justify-content-center ">
<a class="btn botonhome mr-sm-3 mb-3 " routerLink="/backoffice/job" routerLinkActive="active" role="button">Testing1</a>
<a class="btn botonhome mb-3 " routerLink="/backoffice/jobs" routerLinkActive="active" role="button">Testing2</a>
</div>
</div>
</div>
<!--<div class="contain bg-danger">-->
<!--<img class="gear contain" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Cog%2C_Web_Fundamentals.svg">-->
<!--</div>-->
</section>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
</body>
</html>
在响应式中发生的是按钮停留在屏幕的左侧而不是居中:
因此，我尝试对这些按钮使用 d-block 和 mx-auto，它们在响应中正确居中。但是，在大屏幕上它们会分开:
mx-auto 是否只能应用于或禁用特定视口(viewport)？
最佳答案
在所有宽度上应用 d-flex 而不是 d-sm-flex...
<div class="col d-flex justify-content-center">
<a class="btn botonhome mr-3 mb-3 " routerlink="/backoffice/job" routerlinkactive="active" role="button">Testing1</a>
<a class="btn botonhome mb-3 " routerlink="/backoffice/jobs" routerlinkactive="active" role="button">Testing2</a>
</div>
关于html - bootstrap 4 在特定视口(viewport)禁用 mx-auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49824100/