响应式页脚html

Question

我用 html、css 和 bootstrap 制作了一个页脚，它对某种 exctent 有响应，但是当它达到移动尺寸而不是图像连续排列时，它们会堆叠并排成一列，我该如何解决这个问题?我希望我在移动设备大小时与在桌面大小时一样。我希望你能理解，对不起我的英语不好。这是html：

  /*Facebook*/

.fb-icon img {
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
}


/*Twitter*/

.twitter-icon img {
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
}


/*Mail*/

.mail-icon img {
  width: 60px;
  height: 60px;
  display: block;
  margin: auto;
}

.container {
  margin-top: 120px;
  width: 30%;
}

@media (max-width: 767px) {
  /*Facebook*/
  .fb-icon img {
    width: 70px;
    height: 70px;
    display: block;
    margin: auto;
    padding: 5px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<footer class="container">
  <div class="row">
    <!-- Facebook -->
    <div class="col-sm-4 col-xs-4">
      <a target="_blank" class="fb-icon" href="https://www.facebook.com/OxybinTravel"><img onmouseover="this.src='Travel/facebook-2-color.png'" onmouseout="this.src='Travel/facebook-2.png'" alt="Facebook icon" src="Travel/facebook-2.png"></a>
    </div>
    <!-- Twitter -->
    <div class="col-sm-4 col-xs-4">
      <a target="_blank" class="twitter-icon" href="https://twitter.com/oxybintravel"><img onmouseover="this.src='Travel/p-color.png'" onmouseout="this.src='Travel/p.png'" alt="Twitter icon" src="Travel/p.png"></a>
    </div>
    <!-- Mail -->
    <div class="col-sm-4 col-xs-4">
      <div class="tool-tip">
        <a target="_blank" class="mail-icon" href="#"><img onmouseover="this.src='Travel/email-color.png'" onmouseout="this.src='Travel/email.png'" alt="Mail icon" src="Travel/email.png"></a>
      </div>
    </div>
  </div>
</footer>

Answer 1

默认情况下，如果您检查您的引导程序，您将看到引导程序在移动设备上使用col-sm-4 并且具有max-width: 100% css 属性。只需将剪切的这个 css 添加到您的 media query

@media (max-width: 767px) {
  /*Facebook*/

  .col-sm-4 {
    max-width:33.3%;
    display:inline-block;
  }
....
}