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

Question

为了让我的博客在 Shopify 中使用 bootstrap 连续发布 3 篇文章，我做了很多尝试。但由于 for 循环，我无法做到这一点。

现在一行中只有一篇博文 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

试试下面

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

参见 URL有关 GRID 的更多信息