レスポンスリストをブートストラップモーダル内部に入れるにはどうしたらいいですか？

Question

ブートストラップを使用して以下の構造で応答性のあるモーダルを作りたいです。

したがって、各リストアイテムは同じスペースを有しており、テキストおよびすべてのアイテム上の画像は、垂直方向と水平方向に整列。私はここに例を持っています： "https://jsfiddle.net/dq0ygh44/"しかし、イメージとテキストがすべて水平で中央に配置されているわけではありません。あなたはこれを行う方法を知っていますか？

HTML：

<a data-toggle="modal" data-target=".bd-example-modal-lg" href="">Open</a> 
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <div class="container"> 

     <ul class="categories-list"> 

      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">All Options</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option1</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option2</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option Option</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option</a> 
      </li> 
      <li> 
      <img src="http://via.placeholder.com/30x40"/> 
      <a class="">Option</a> 
      </li> 
     </ul> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：すべての要素が同じ幅を有するように

.categories-list{ 

    display: flex; 
    flex-wrap:wrap; 
    max-height:50px; 
    overflow-y:auto; 
    justify-content: space-between; 
    li{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    padding: 1rem; 
    border: 10px solid gray; 
    margin-right: 1rem; 
    border-radius: 5px; 

    &:hover{ 
     background-color: $blue; 
     color: $white; 
     border-radius: 5px; 
     cursor: pointer; 

    } 

    img{ 
     width: 30px; 
     height: 30px; 
    } 
    } 

} 

Answer 1

私はあなたのイメージを複製することができた、私はCSSにSASSを変換し、min-widthを追加しました。また、ulタグにclearfixが追加され、子の幅になります。

JSFiddle Demo

CSS：

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

* html .clearfix { 
    zoom: 1; 
} 

/* IE6 */ 
*:first-child + html .clearfix { 
    zoom: 1; 
} 

/* IE7 */ 
.categories-list { 
    display: flex; 
    flex-wrap: wrap; 
    max-height: 50px; 
    overflow-y: auto; 
    justify-content: space-between; 
} 
.categories-list li { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 1rem; 
    border: 10px solid gray; 
    margin-right: 1rem; 
    border-radius: 5px; 
    min-width:150px; 
    min-height:100px; 
    margin:10px; 
} 
.categories-list li:hover { 
    background-color: blue; 
    color: white; 
    border-radius: 5px; 
    cursor: pointer; 
} 
.categories-list li img { 
    width: 30px; 
    height: 30px; 
}