如何在 div 更改大小时缩小内联列表中的图像以保持列表内联?

How do I make images in an inline list scale down to keep the list inline as the div changes size?

我在 Bootstrap 中完成的一个网站的 header 中有一个社交媒体图标的内联列表 4. 随着屏幕尺寸的变化,按比例缩小,图像图标保持内联,直到它们的 div 达到 1112px 然后他们开始换行。一旦 div 达到 414px,他们 return 内联并且看起来不错。我试过将列表项设置为特定的宽度和高度,然后为 max-width: 100% 和高度创建一个图像 class: auto 但这没有用。使用 Bootstrap 原生 "list-inline" 和 "list-inline-item" classes 也没有用。

CSS

.col-sm.scl {
margin-top: 20px;
text-align: center; 
}
.col-sm.scl ul {
list-style: none;
padding: 0px;
}

.col-sm.scl ul li {
width: 40px;
height: 41px;
display: inline;
padding-right: 2px;
padding-left: 2px;
}

HTML

<div class="row">

<!-- Social Icons -->
<div class="col-sm scl">
<ul>
<li><img src="images/facebook.png" class="socialitems" alt="Facebook   Icon"></li>
<li><img src="images/twitter.png" class="socialitems" alt="Twitter Icon"></li>
<li><img src="images/linkedin.png" class="socialitems" alt="Linkedin Icon"></li>
<li><img src="images/youtube.png" class="socialitems" alt="Youtube Icon"></li>
<li><img src="images/email.png" class="socialitems" alt="Email Icon">.  </li>
</ul>
</div>
<!-- Social Icons END -->
</div>

使用您的代码,我已将列表编辑为 inline-block。您可能需要调整每个菜单的宽度 li 以获得所需的外观。

.center {
    text-align: center;
}
#myFooter .second-bar {
    background-color: #33373e;
}

#myFooter .second-bar a {
    font-size: 22px;
    color: #9fa3a9;
    padding: 10px;
    transition: 0.2s;
    line-height: 68px;
}

#myFooter .second-bar a:hover {
    text-decoration: none;
    color: #00aced;
}


@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }

    #myFooter .info {
        text-align: center;
    }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="myFooter">
  <div class="second-bar">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-4">
          <h2 class="logo"><a href="#"> LOGO </a></h2>
        </div>
        <div class="col-sm-12 col-md-4 center">
          <p style="color: #fff; line-height: 68px;">More Content</p>
        </div>
        <div class="col-sm-12 col-md-4">
          <div class="social-icons center">
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-google-plus"></i></a>
            <a href="#"><i class="fa fa-envelope"></i></a>
            <a href="#"><i class="fa fa-github"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>