使用引导程序将两个 div 水平并排水平居中对齐 [重复]

Question

我已尝试使用“col-xs-6 col-sm-6 col-md-8”，但它不适用于 575px 及以下屏幕。有什么解决办法吗？

<div class="container">
                    <div class="row align-items-center">
                        <div class="col-xs-6 col-sm-6 col-md-8">
                            <!-- Top Contact -->
                            <div class="top-contact">
                                <div class="single-contact"><i class="fas fa-phone-alt"></i>Phone: 1800 123 4567</div> 
                                <div class="single-contact d-none d-lg-inline-block"><i class="fa fa-envelope-open"></i><a href="mailto:info@email.com">info@email.com</a></div>    
                                <!-- <div class="single-contact"><i class="fa fa-clock-o"></i>Opening: 09AM - 06PM</div>  -->
                            </div>
                            <!-- End Top Contact -->
                        </div>  
                        <div class="col-xs-6 col-sm-6 col-md-4">
                            <div class="topbar-right">
                                <!-- Social Icons -->
                                <ul class="social-icons">
                                    <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>                                                           
                                <div class="button">
                                    <a href="contact.php" class="pixcorp-btn">Get a Quote</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

截图如下

https://i.stack.imgur.com/r5UZ6.jpg

Answer 1

.col-xs- 不是有效的Bootstrap 4 列类。

Bootstrap 3 .col-xs- 是一个有效的类。也许这就是你搞混的原因。

在 Bootstrap 4 中，只需将 .col- 用于您的最小或第一个屏幕尺寸列类。

<div class="container">
  <div class="row align-items-center">
    <div class="col-6 col-sm-6 col-md-8">
      <!-- Top Contact -->
      <div class="top-contact">
        <div class="single-contact"><i class="fas fa-phone-alt"></i>Phone: 1800 123 4567</div>
        <div class="single-contact d-none d-lg-inline-block"><i class="fa fa-envelope-open"></i><a href="mailto:info@email.com">info@email.com</a></div>
        <!-- <div class="single-contact"><i class="fa fa-clock-o"></i>Opening: 09AM - 06PM</div>  -->
      </div>
      <!-- End Top Contact -->
    </div>
    <div class="col-6 col-sm-6 col-md-4">
      <div class="topbar-right">
        <!-- Social Icons -->
        <div class="button">
          <a href="contact.php" class="pixcorp-btn">Get a Quote</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>