创建一个分为 3 行的按钮列表

Question

我想要一个以响应为中心的菜单，其中有几个选项卡分为三行，并为移动设备保留这三行。

我像下面那样做了，但它看起来一团糟......它有效，但在结构方面可能有比将菜单分成三个弹性容器更好的选择......你有更好的想法吗？

这就是我想要的：一个由 3 行组成的响应式居中菜单

我试过：

<style> .flex-container { display: flex; flex-direction: row; text-align: center; gap: 16px; justify-content: center; } /\\\* Responsive layout - makes a row responsive or one column-layout instead of two-column layout \\\*/ u/media (max-width: 800px) { .flex-container { flex-direction: row; /\\\*flex-direction: column;\\\*/ } } </style>

<div class="col-md-12" style="margin-bottom: 10em;">

<style> .flex-container { display: flex; flex-direction: row; text-align: center; gap: 16px; justify-content: center; }

/\* Responsive layout - makes a row responsive or one column-layout instead of two-column layout \*/

u/media (max-width: 800px) { .flex-container { flex-direction: row; /\*flex-direction: column;\*/ } } </style>

<div class="col-md-12" style="margin-bottom: 10em;">

<div class="flex-container"> 
<p><a class="btn btn-default" href=")" role="button">Poverty</a></p> 
<p><a class="btn btn-default" href="" role="button">Water</a></p>       
<p><a class="btn btn-default" href="" role="button">Disasters</a></p> </div>

<div class="flex-container"> 
<p><a class="btn btn-default" href=")" role="button">Poverty</a></p> 
<p><a class="btn btn-default" href="" role="button">Water</a></p>        
<p><a class="btn btn-default" href="" role="button">Disasters</a></p> </div>

<div class="flex-container"> 
<p><a class="btn btn-default" href=")" role="button">Poverty</a></p> 
<p><a class="btn btn-default" href="" role="button">Water</a></p>       
<p><a class="btn btn-default" href="" role="button">Disasters</a></p> </div>

</div>