html - 如何在 Bootstrap 网格中居中 2 列

Question

我试图在 Bootstrap 中将两列居中，无论偏移或居中如何，它们都不会在 md 大小或以上的全宽列中心的同一行上

尝试了 col-md-6 偏移并添加行中心和列中心类，但没有任何效果

这是完整的页脚代码 - 我希望电子邮件和电话在大屏幕上排在一行，而两个社交图标并排在下一行。它包装得很好，可以在移动设备上显示，只是我需要一些帮助才能在更大的屏幕上显示。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="container-fluid footer-container">
    <div id="footer" class="row">
        <div class="col-md-12">

            <div id="action" class="row">
                <div class="col-md-12">

                    <btn class="footer-button">
                        <a href="contact.html" <h5 class="footer-items">BOOK NOW!</h5></a>
                    </btn>
                </div>
            </div>
            <div id="contact-methods" class="row">
                <div class="col-md-6">
                    <a class="send-email" href="mailto:bookings@samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
                    <h5>Email Samantha</h5></a>
                </div>

                <div class="col-md-6">
                    <a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i><h5>905-749-5700</h5></a>
               </div>
            </div>
            <div class="row row-center">
                <div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
                </div>
                <div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

将“文本中心”类添加到您的行。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
    <div id="footer" class="row">
      <div class="col-md-12">
        <div id="action" class="row text-center">
          <div class="col-md-12">
            <btn class="footer-button">
              <a href="contact.html" <h5 class="footer-items">BOOK NOW!</h5></a>
            </btn>
          </div>
        </div>
        <div id="contact-methods" class="row text-center">
          <div class="col-md-6">
            <a class="send-email" href="mailto:bookings@samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
              <h5>Email Samantha</h5>
            </a>
          </div>
          <div class="col-md-6">
            <a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i>
              <h5>905-749-5700</h5>
            </a>
          </div>
        </div>

        <div class="row text-center">
          <div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i>
            </a></div>
          <div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>