Сделать список значков отзывчивым с помощью Bootstrap - PullRequest
Новая
       38

Сделать список значков отзывчивым с помощью Bootstrap

1 голос
/ 14 июня 2019

Этот список значков (шрифтов) выстроен в нижней части страницы раздела.На мобильном телефоне линия значков переполняется справа на этой странице.Я хотел бы иметь 3 или 4 иконки в строке вместо этого на меньшем экране.Я перепробовал несколько вариантов, и лучшее, что я получил, это отрезанная линия (не все иконки показывались).Любая реплика будет принята с благодарностью, я не знаю, что я делаю неправильно: - /

HTML: 

<!--Skills-->

<div class="container">
 <div class="icons text-center">
   <ul>
   <a href="##" id="html"><li><i class="fab fa-html5"></i></li></a>
   <a href="##" id="css"><li><i class="fab fa-css3-alt"></i></li></a>
   <a href="##" id="js"><li><i class="fab fa-js"></i></li></a>
   <a href="##" id="bootstrap"><li><i class="fab fa-bootstrap"></i></li></a>
   <a href="##" id="sass"><li><i class="fab fa-sass"></i></li></a>
   <a href="##" id="less"><li><i class="fab fa-less"></i></li></a>
   <a href="##" id="github"><li><i class="fab fa-github"></i></li></a>
   <a href="##" id="wordpress"><li><i class="fab fa-wordpress"></i></li></a>
   <a href="##" id="adobe"><li><i class="fab fa-adobe"></i></li></a>
   <a href="##" id="python"><li><i class="fab fa-python"></i></li></a>
  </ul>
 </div>
</div>

Что касается CSS: 

/*Skills*/

.icons {
    padding: 0px 0px;
    }

ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content:space-around;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    }

ul li {
   list-style: none;
   font-size: 30px;
   border-radius: 400px;
   width: 50px;
   height: 50px;
   display: block;
   text-align: center;
   padding-top: 4px;
   padding-bottom: 0px;
   color: #2c3e50;
}

.icons > ul li {
flex: 1;
}

form ul li {
  font-size: 15px;
  width: inherit;
  color: #ff0000;
  text-align: left;
}

form ul {
  margin-left: 0px;
  margin-right: 0px;
  height: 10px;
}

/*What I tried so far... some of them might be nonesense but I was desperate!*/

@media (max-width: 450px) {
    .icons {
        padding: 25px;
        width: 25%;
        flex-wrap: wrap;
        position: absolute;
        margin:auto;
        justify-content: center;
        align-items: center;
        display:inline-block;
        text-align: center;
        overflow-x: hidden;
        line-height: 1.2;
        width: 100%;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }

@media (max-width: 450px) {
    .icons li {
      width: 50%;
    }

Ответы [ 2 ]

1 голос
/ 14 июня 2019

реструктурируйте ваш код, чтобы удалить ul, li и позволить поведению по умолчанию управлять этим;

рабочий фрагмент ниже: 

i {
  list-style: none;
  font-size: 30px;
  border-radius: 400px;
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 0px;
  color: #2c3e50;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Do you really need ul, li ?
<hr/>
<div class="icons text-center">
  <a href="##" id="html"><i class="fab fa-html5"></i></a>
  <a href="##" id="css"><i class="fab fa-css3-alt"></i></a>
  <a href="##" id="js"><i class="fab fa-js"></i></a>
  <a href="##" id="bootstrap"><i class="fab fa-bootstrap"></i></a>
  <a href="##" id="sass"><i class="fab fa-sass"></i></a>
  <a href="##" id="less"><i class="fab fa-less"></i></a>
  <a href="##" id="github"><i class="fab fa-github"></i></a>
  <a href="##" id="wordpress"><i class="fab fa-wordpress"></i></a>
  <a href="##" id="adobe"><i class="fab fa-adobe"></i></a>
  <a href="##" id="python"><i class="fab fa-python"></i></a>
</div>
1 голос
/ 14 июня 2019

Вы могли бы что-то сделать таким образом 

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container text-center">

  <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span>
</div>
...