如何在Bootstrap中让循环获取的猪档案项每行两个并排显示？

我正在搭建一个页面，从数据库获取猪档案并展示品种和图片，希望每行显示2个并排的档案，但目前每个档案都单独占一行。档案能正常获取，样式和跳转都符合预期，就是没法实现并排。我尝试在循环前添加container，但还是没搞懂布局逻辑。代码如下：

<!doctype html>
<html lang="en">

{% extends 'base.html' %}

{% block content %}
<br/>
<div class="container text-center"
    <div class="row">
        <h1> Pig Breeds </h1>
    </div>
</div><br/>



        {% for pig in pigs %}


        <div class="container text-center">
        
            <div class="col col-sm-4">
                
                        
                        <div class="row">
                            <a href="{{ url_for('pig_page', id=pig.id)}}"><img src="{{ url_for('static', filename='images/' + pig.breed_picture)}}"" class="rounded-circle"  height='200'></a>
                        </div><br/>
                        <div class="row">
                            <h2><a href="{{ url_for('pig_page', id=pig.id)}}">{{ pig.breed }}<a/></h2>
                        </div>
                        
                            {% if current_user.id == 1 %}
                                <a href="{{ url_for('delete_pig', id=pig.id) }}" class="btn btn-outline-danger btn-sm">Delete</a>
                            {% endif %}
                        
                        </div>
                    </div>
                </div><br/><br/>
            </div>
  
{% endfor %}
{% endblock %}

</html>

问题出在布局结构错误和列宽设置不对，以下是修正要点和完整代码：

1. 所有猪档案的列元素必须放在同一个row容器内，不能在循环里重复创建container和row，否则每个档案都会被单独包裹成一行
2. Bootstrap是12列布局，要每行显示2个档案，需给每个列设置col-md-6（6*2=12，中等屏幕及以上自动每行2个，小屏幕会自动堆叠），而非col-sm-4（这会每行显示3个）
3. 修复代码里的标签语法错误：比如第一个container未闭合div标签、图片标签多了一个引号、品种名称的a标签未正确闭合

修正后的代码：

<!doctype html>
<html lang="en">

{% extends 'base.html' %}

{% block content %}
<br/>
<div class="container text-center">
    <div class="row">
        <h1> Pig Breeds </h1>
    </div>
</div><br/>

<div class="container text-center">
    <div class="row">
        {% for pig in pigs %}
            <div class="col-md-6 mb-4">
                <div class="row">
                    <a href="{{ url_for('pig_page', id=pig.id)}}">
                        <img src="{{ url_for('static', filename='images/' + pig.breed_picture)}}" class="rounded-circle" height='200'>
                    </a>
                </div><br/>
                <div class="row">
                    <h2><a href="{{ url_for('pig_page', id=pig.id)}}">{{ pig.breed }}</a></h2>
                </div>
                
                {% if current_user.id == 1 %}
                    <a href="{{ url_for('delete_pig', id=pig.id) }}" class="btn btn-outline-danger btn-sm">Delete</a>
                {% endif %}
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

</html>

额外优化：给每个列添加mb-4类，增加底部间距，避免布局拥挤。

内容的提问来源于stack exchange，提问作者Tomoo90