Question

我用html，css和bootstrap创建了一个页脚，它响应了某种程度的激动但是当它达到移动大小而不是连续的图像时它们堆叠并进入一列，我该如何解决这个问题？我希望我在移动设备尺寸方面同样适用于桌面尺寸。我希望你理解，抱歉我的英语不好。这是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;
  }
....
}

响应页脚html

1 个答案: