Как сделать так, чтобы изображения во встроенном списке уменьшались, чтобы сохранить список встроенным при изменении размера div? - PullRequest
Новая
       39

Как сделать так, чтобы изображения во встроенном списке уменьшались, чтобы сохранить список встроенным при изменении размера div?

0 голосов
/ 25 февраля 2019

У меня есть встроенный список значков социальных сетей в заголовке веб-сайта, выполненный в 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>

1 Ответ

0 голосов
/ 25 февраля 2019

Используя ваш код, я отредактировал список на 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>
...