html - 在模态中使用 .container 和 .row 响应类

Question

我想在 Bootstrap 模式中有这样的结构:

因此，在大型设备中有 3 列，尺寸为 4，在中型设备中有 2 列，尺寸为 6，在较小的设备中有 1 列。粉红色区域为小图像。

但我不知道如何以好的方式做到这一点，最好创建很多 <ul> ，例如 3 个 uls，每个 uls 有 1/3 的选项，并将 .col 类放在每个 <ul> 中, 或者只使用 1 <ul>并将 .col 类放在每个列表项中？

此外，我希望列表项之间的水平和垂直间距相同。

我已经有了这个结构:https://jsfiddle.net/dehnxj77/ ，但我不知道如何解决上述两个问题:

• 列表项的水平和垂直间距不同

• 此外，此结构没有图像那样的响应式结构。

• 我在列表项中使用 flex-basis:30%这样每个列表项都有相同的宽度，但我不知道这是否正确。也许对于响应式类，这是没有必要的。

Answer 1

li {margin-top:10px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <ul class="row" type="none">
    <li class="col-lg-4 col-md-6 col-sm-12">
      <img src="http://weknowyourdreams.com/images/pink-color/pink-color-05.jpg" class="img-responsive img-rounded" style="height:50px;width:50px;display:inline"/>
      <span>option1</span>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
      <img src="http://weknowyourdreams.com/images/pink-color/pink-color-05.jpg" class="img-responsive img-rounded" style="height:50px;width:50px;display:inline"/>
      <span>option1</span>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
      <img src="http://weknowyourdreams.com/images/pink-color/pink-color-05.jpg" class="img-responsive img-rounded" style="height:50px;width:50px;display:inline"/>
      <span>option1</span>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
      <img src="http://weknowyourdreams.com/images/pink-color/pink-color-05.jpg" class="img-responsive img-rounded" style="height:50px;width:50px;display:inline"/>
      <span>option1</span>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
      <img src="http://weknowyourdreams.com/images/pink-color/pink-color-05.jpg" class="img-responsive img-rounded" style="height:50px;width:50px;display:inline"/>
      <span>option1</span>
    </li>
   </ul>
</div>