Question

我有两个按钮，当它们在响应式屏幕中时，它们需要水平居中，一个在另一个之下，在较大的屏幕中，它们需要彼此相邻，也是居中的。

              <!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吗？

Answer 1

在所有宽度处应用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>

https://www.codeply.com/go/sJTHRXBK4M

Answer 2

让您的按钮堆叠在小屏幕上我将按钮排成一排，然后将两个按钮放在单独的div中。

     <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>
        <div class="row align-items-center text-center">
           <div class="col-sm-6">
             <a class="btn botonhome   mr-sm-3 mb-3 " routerLink="/backoffice/job" routerLinkActive="active" role="button">Testing1</a>
           </div>

             <div class="col-sm-6">
               <a class="btn  botonhome    mb-3 " routerLink="/backoffice/jobs" routerLinkActive="active" role="button">Testing2</a>
             </div>
           </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>

bootstrap 4在某些视口禁用mx-auto

2 个答案: