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>

有关GRID

的更多信息，请参阅URL

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

2 个答案: