html - 需要帮助优化移动设备的 Bootstrap 网格，以便桌面 View 在移动设备上相同

Question

出于某种原因，这些列是垂直堆叠而不是水平堆叠:

                <div id="logos" class="row justify-content-center align-items-center">
                    <div class="col-xs-3">
                        <a href="https://listen.tidal.com/album/107846023">
                            <img class="img-fluid" id="tidal" src={tidal} alt=""></img>
                        </a>
                    </div>

                    <div class="col-xs-3">
                        <a href="https://geo.music.apple.com/us/album/_/1460176267?mt=1&app=music&at=1000lHKX">
                            <img class="img-fluid" id="apple" src={apple} alt=""></img>
                        </a>
                    </div>

                    <div class="col-xs-3">
                        <a href="https://open.spotify.com/album/6ITBoE1l1zPCtXKOTN12IC">
                            <img class="img-fluid" id="spotify" src={spotify} alt=""></img>
                        </a>
                    </div>
                    <div class="col-xs-3">
                        <a href="https://www.pandora.com/artist/various-artists/love-hart-presents-hartfm-explicit/AL2V7Pb7xcg7p74">
                            <img class="img-fluid" id="pandora" src={pandora} alt=""></img>
                        </a>
                    </div>
                </div>

不知道到底要做什么。我的 CSS 规则:

#logos {
  display: flex;
  align-items: center;
  margin-top: -25px;
  margin-bottom: 10px;
}

#tidal {
  display: block;
  width: 5%;
  float: none;
  margin: 0 auto;
}

#apple {
  display: block;
  width: 5%;
  float: none;
  margin: 0 auto;
}

#spotify {
  display: block;
  float: none;
  margin: 0 auto;
  width: 4%;
}

#pandora {
  display: block;
  float: none;
  margin: 0 auto;
  width: 9%;
}

我尝试了所有调整大小的方法，但似乎没有任何效果。我不确定这是否与样式、我的 Bootstrap 代码或其他什么有关。

Answer 1

这不起作用的原因很简单——Bootstrap 中没有 .col-xs-3 类，所以它的样式被设置为普通的 div。

您有 5 个选择:

col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*

只需使用这些断点中的任何一个，它就会解决您的问题。

更多信息:DOCUMENTATION