django 如何解决设置边距时div滑到下一行,Bootstrap

j2cgzkjk  于 2023-10-21  发布在  Go
关注(0)|答案(1)|浏览(131)
{% for plant in plants %}
    {% if forloop.counter0|divisibleby:3 %}
        <div class="row row-cols-3">
    {% endif %}
    {% include 'included/_plant_cell.html' %}
    {% if forloop.counter|divisibleby:3 %}
        </div>
    {% endif %}
{% endfor %}

_plant_cell.html:

<div class="plant-cell card col-md-4 m-1">
   <div class="card-body">
      <div class="card-text">
        {{ plant.name }}
      </div>
   </div>
</div>

下面的代码导致只包含两张卡片的行,第三张卡片向下滑动到下一行(当边缘m-1被移除时,然后OK),因此一般视图重复:两张牌一张牌
希望看到每行有三张牌。

mbyulnm0

mbyulnm01#

_plant_cell.html:

<div class="col-md-4 p-1">
   <div class="card plant-cell">
      <div class="card-body">
          <div class="card-text">
             {{ plant.name }}
          </div>
      </div>
   </div>
</div>

我把margin改为padding p-1,然后把卡片plant-cell从column分隔成subsidiary div,这工作得很好,和预期的一样,也更规范化了。

相关问题