在modal中使用.container和.row响应类

Question

我希望在bootstrap模式中有这样的结构：

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

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

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

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

• 列表项目不会在水平和垂直方向上显示相同的空格

• 此结构也没有像图像那样的响应结构。

• 在列表项中我使用<ul>，以便每个列表项具有相同的宽度，但我不知道这是否正确。也许对于响应式课程，这不是必需的。

Answer 1

第一个点：应用保证金：0自动;你的块和一个证明内容：你的flexbox后面的元素之间的空格。

第二点：在你的模态中你已经添加了一个容器和一行，因为你正在使用bootstrap，所以你可以像往常一样继续使用col-md col-sm col-lg，你将节省很少的css调整。

第三点：要使高度相同，请在所有元素上使用max-height，使其具有完全相同的高度，并在需要时根据媒体查询进行调整。

Answer 2

＆＃13;

＆＃13;

li {margin-top:10px;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;