Bootstrap 4 - 3 列在移动视图中折叠

Question

但是当我进入移动视图时，我的页脚中有 3 列。水平列变为垂直堆叠。即使在移动视口中，如何将它们保持水平 3 列？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid footer">
      <div class="row">
        <div class="col-xs-4 col-sm-6 col-md-7 col-lg-8">
          <p class="copyright text-left pl-3">Street Scents 2018&copy;</p>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2 info">
          <p class="nav-link-title">SOCIAL MEDIA</p>
            <ul class="links" href="https://www.instagram.com/streetscents" target="_blank"><i class="fab fa-instagram"></i> Instragram</ul>
            <ul class="links" href="https://twitter.com/STREETSCENTS" target="_blank"><i class="fab fa-twitter"></i> Twitter</ul>
            <ul class="links" href="https://www.youtube.com/user/FRAGRANCEFANATIC1" target="_blank"><i class="fab fa-youtube"></i> YouTube</ul>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 info">
          <p class="nav-link-title">CONTACT</p>
            <ul class="links" href="mailto:fragrancefanatic1@yahoo.com?Subject=Hello">fragrancefanatic1@yahoo.com</ul>
        </div>
      </div>
    </div>

Answer 1

将 .col-4 添加到您的三列中的每一列。 Bootstrap 4 为小于小型设备 (< 576px) 引入了一个额外的断点层。这应该可以防止在移动设备上堆叠。

Bootstrap 4 - 3 列在移动视图中折叠

Bootstrap 4 - 3 Column Collapses on Mobile View

collapse