html - 如何在引导模式中有响应列表？

Question

我想使用 Bootstrap 创建具有以下结构的响应式模式。

所以每个列表项都有相同的空间和文本上方的图像，所有元素垂直和水平对齐。我这里有一个示例:“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

我能够复制你的图像，我将 SASS 转换为 CSS 并添加了一个 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;
}