如何使图像网格响应?

Question

我对html/css很陌生，所以如果这是一个愚蠢的问题，请原谅我。基本上，在我的主页上，我有几个图像网格图标，这些图标超链接到我网站上的其他页面。不过，我真的很难让它响应起来，如果有人能帮助我让它响应起来，那就太好了！

这是我的HTML和CSS。请让我知道我可能做错了什么！

<a href="page1.html"> 
<div id="bor_panel"> 
<img src="page1.jpg">
<span>Page 1</span>

</div>
</a>


<a href="page2.html"> 
<div id="bor_panel"> 
<img src="page2.jpg">
<span>Page 2</span>

</div>
</a>        

<a href="page3.html"> 
<div id="bor_panel"> 
<img src="page3.jpg">
<span>Page 3</span>

</div>
</a>        


<a href="page4.html"> 
<div id="bor_panel"> 
<img src="page4.jpg">
<span>Page 4</span>

</div>
</a> 

<a href="page5.html"> 
<div id="bor_panel"> 
<img src="page5.jpg">
<span>Page 5</span>

</div>
</a>        

<a href="page6.html"> 
<div id="bor_panel"> 
<img src="page6.html">
<span>Page 6</span>
</div>

#bor_panel {       
font-family: 'Bebas Neue', cursive;
font-size: 2em;
border-radius: 12px;
border: 2px solid #000;s
float: left;    
margin-top: 10px;
margin-left: 16px;    
margin-right: 16px;
width: 270px;
height: 270px;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 5px;
padding-right: 5px;
justify-content: space-between
}

Answer 1

这个类会把它加起来：

img-fluid        --Bootstarp3
img-resposive    --Bootstarp4