如何使用Django和Bootstrap在网格上显示动态内容？

Question

我正在开发一个Django项目,其主页类似于StackOverflow:它在单个主列中显示传入的用户生成内容的片段.然而,我想那些内容片段跨越的3行填充主页来显示(认为[Pinterest的插接板页] [2]或网格布局博客).

我正在使用Bootstrap的网格系统,但意识到我不知道Python/Django模板magic + Bootstrap的正确组合,以便在网格中填充传入的内容.有人可以为我拼写这个吗？

我想要...

            {% for question in questions.paginator.page %}
            {% question_list_item question %}
            {% endfor %}

...具有重复的效果

<div class="container">
     <div class="row clearfix">
          <div class="col-md-4">
                item 1
          </div>
          <div class="col-md-4">
                item 2
          </div>
          <div class="col-md-4">
                item 3
          </div>
     </div>
     <div class="row clearfix">
          <div class="col-md-4">
                item 1
          </div>
          <div class="col-md-4">
                item 2
          </div>
          <div class="col-md-4">
                item 3
          </div>
     </div>
</div>

更新:我能够使用以下内容实现此功能(具有响应性的小列数变化),但我是初学者,所以如果有更好的解决方案,请告诉我.

                    <div class="row">
                        {% for question in questions.paginator.page %}
                        <div class="col-lg-3 col-sm-6 col-xs-12">
                            {% question_list_item question %}
                        </div>
                        {% if forloop.counter|divisibleby:4 %}
                    </div>
                    <div class="row">
                        {% endif %}
                        {% endfor %}
                    </div>

谢谢!

Answer 1

最简单的情况是，如果您有两条单独的用户提供的信息，需要分成两列；那么你可以这样做：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      {{ usercontent.thing_a }}
    </div>
    <div class="col-sm-6">
      {{ usercontent.thing_b }}
    </div>
  </div>
</div>

如果用户在一个大的整体块中输入内容，您需要弄清楚如何将其拆分 - 文本中是否有一些标记可以用来将其分为两部分，然后像上面那样做？如果是这样，您可以将其与 Python 分开split或使用正则表达式。

或者这个连续的文本，就像一篇文章的正文，你希望它分成两半？如果是后一种情况，我会将文本显示在一个 Bootstrap 列中，但使用 CSS3 的“column”属性显示为两列。