如何在循环中使用 Bootstrap Div ..？

Question

我尝试了很多方法，使用 Shopify 中的 bootstrap 使我的博客连续 post 3 次。但由于 for 循环，我无法做到这一点。

现在只有一个博客 post 排成一排 blog url。我想连续显示 3 个博客。这是我的代码：

<div class="row">
 <div class="col-xs-12 main-col">
   <div class="content-blog">
    <ul class="list-blog" style="list-style: none;">
     {% for article in blog.articles %}
     <li class="myownstyleclass" style=" border: 2px solid #D3D3D3; padding-left:15px;"> 
       <h3><a href="{{ article.url }}">{{ article.title }}</a></h3></li>
     {% endfor %}
  </ul>
  </div>
</div>
</div>

我尝试了另一种逻辑：

<ul class="list-blog" style="list-style: none;">
{% for article in blog.articles %}
 <div class="row">
  <div class="col-xs-12 main-col">
   <div class="content-blog">
     <li class="myownstyleclass" style=" border: 2px solid #D3D3D3; padding-left:15px;"> 
      <h3><a href="{{ article.url }}">{{ article.title }}</a></h3></li>
   </div>
  </div>
 </div>
{% endfor %}
</ul>

没有任何帮助。有什么帮助吗？我对此很陌生。

Answer 1

<ul class="list-blog" style="list-style: none;">
   <div class="row">
     {% for article in blog.articles %}
    <div class="col-xs-4 main-col">
       <div class="content-blog">
 <li class="myownstyleclass" style=" border: 2px solid #D3D3D3; padding-left:15px;"> 
   <h3><a href="{{ article.url }}">{{ article.title }}</a></h3></li>

          </div>
         </div>
     {% endfor %}
        </div>
 </ul>

Answer 2

试试下面

<div class="container">
  <div class="row">
    {% for article in blog.articles %}
    <div class="col-sm-4">
       <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
    </div>      
    {% endfor %}   
  </div>
</div>

有关 GRID

的更多信息，请参阅 URL

如何在循环中使用 Bootstrap Div ..？

How to use Bootstrap Div in loop ..?

liquid

shopify

twitter-bootstrap