我在Bootstrap 4中完成的网站标题中有一个社交媒体图标的内联列表。随着屏幕尺寸的变化,缩小尺寸,图像图标保持内联直到它们的div达到1112px然后它们开始断线。一旦div达到414px,它们就会返回内联并且看起来不错。我已经尝试将列表项设置为特定的宽度和高度,然后创建最大宽度的图像类:100%和高度:自动,但这不起作用。使用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>
使用您的代码我已将列表编辑为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>