Html 通过引导使图标列表响应

我有这个图标（字体）列表在一个部分的页面底部。在手机上，图标行在页面右侧溢出。我想有3或4图标每行，而不是在较小的屏幕上。我尝试了多种可能性，我得到的最好结果是线路被切断（没有显示所有图标）。任何提示都将不胜感激，我不知道我做错了什么：-/

HTML:

---

你本可以这样做的

---

重新构造您的代码以删除ul、li，并让默认行为管理此代码

正在处理下面的片段：

i{
列表样式：无；
字体大小：30px；
边界半径：400px；
宽度：50px；
高度：50px；
显示：块；
文本对齐：居中；
垫面：4px；
垫底：0px；
颜色：#2c3e50；
}

李，你真的需要ul吗？

再次接受和拒绝我的回答的原因是什么？我意识到我不能接受多个回答，但我可以投票多个。我只是想了解一下。如果你接受或不接受我的回答，我会失去我的声誉。请勾选此项以了解您应在何时接受答案。好的，对不起，我不知道每次点击都有责任

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

/*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%;
    }