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>

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

1 个答案: