使用引导程序创建响应式图标列表

Question

我把这个图标(字体(列表排列在一个部分的页面底部。在移动设备上，该页面右侧的图标行溢出。我希望每行有 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%;
    }

Answer 1

重组

代码以删除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>

Answer 2

你可以这样做

<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>