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

Question

我在 Bootstrap 4 中完成的网站标题中有一个内联的社交媒体图标列表。随着屏幕尺寸的变化，缩小，图像图标保持内联，直到它们的 div 达到 1112 像素，然后它们开始换行。一旦 div 达到 414px，它们就会返回 inline 并且看起来不错。我尝试将列表项设置为特定的宽度和高度，然后为 max-width: 100% 和 height: auto 创建一个图像类，但这不起作用。使用 Bootstrap 原生的“list-inline”和“list-inline-item”类也不起作用。

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>

Answer 1

使用您的代码，我已将列表编辑为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>