将左右列添加到响应式Bootstrap行的最佳方法？ （TWIG）

Question

我使用TWIG渲染一些HTML / Twitter Boostrap CSS代码。我使用以下代码创建了一个图库：

<section class="row align-items-center" style="margin:0px; padding:0px;">    
      {% for i in contents %}
      <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 text-center box">
        <a href="#">
          <img class="ownthumbnail" src="{{ asset('images/'~section~'/'~i) | imagine_filter('mini') }}" alt=":-)">
        </a>
      </div>
      {% endfor %}
</section>

出于某些设计原因，我希望每个渲染行自动添加两列（一个左边，一个像边距一样），与窗口大小无关（xs，sm，md或lg）。 你会如何解决这个问题？

编辑：要清楚，我现在得到的是一个有6列（col-lg-2），4列（col-md-3），3列（col-sm-4）或1列的画廊（ col-xs-12）取决于屏幕的大小。我想要相同的网格布局，但让左右列为空。对于col-lg-2情况，这将是理想情况下的，具有9个图像：

emp：空 img：image

[empt][img1][img2][img3][img4][empt]
[empt][img5][img6][img7][img8][empt]
[empt][img9][empt][empt][empt][empt]

Answer 1

对于div标签的类，您可以设置class =“col-xs-6 col-sm-6 col-md-6 col-lg-6”。我希望这是有效的。它应该在每一行中设置两列。

Answer 2

我回答我自己的问题：我使用JavaScript动态设置图库。在HTML中，我有一个隐藏的“行”，我的图片在那里。当窗口加载或调整大小时，我使用ResponsiveBootstrapToolkit库获取当前Bootstrap的断点并使用额外的空cols克隆隐藏行以获得我希望的布局。