python - 在列中插入图像后溢出

我知道这是一个问题，但是我很新，不知道要寻找答案的确切术语是什么。

我在Django 1.11上使用Bootstrap-3.3.7

当我在第一列和第一行插入图像时，第二列会溢出。

带图片



没有图像的列可以正常工作。

                          <div class="tab-content">

                          <div class="tab-pane active" id="{{vg.grouper.id}}{{fg.grouper.id}}hari_ini">

                            <div class="row">
                            {% for sg in show_list2 %}
                            {% if sg.grouper %}
                            {% for sh in sg.list %}

                            <div class="col-xs-3 col-xs-spl col-xs-npr">
                                <div class="contain">
                                                {% load static %}

                                                {% ifchanged %}
                                                <img src='{% static sh.film.poster %}' width= 100% >
                                                {% endifchanged %}
                                </div>
                            </div>


                            <div class="col-xs-3 col-xs-npl col-xs-npr">
                                <div class="content">
                                    <ul>
                                        <li>
                                                <p class=p1>{{ sh.show_time_today }}</p>

                                        </li>
                                    </ul>
                                </div>
                            </div>
                           <div class="col-xs-3 col-xs-npl col-xs-npr">
                                <div class="content">
                                    <ul>
                                        <li>

                                            <p class=p1>{{ sh.rps_price }}</p>



                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-xs-3 col-xs-npl col-xs-npr">
                                <div class="content">
                                    <ul>
                                        <li>

                                            <p class=p1>{{ sh.rps_price }}</p>



                                        </li>
                                    </ul>
                                </div>
                            </div>
                                        {% endfor %}
                                            {% endif %}
                                        {% endfor %}

                                    </div>
                          </div>

我试过下面的css没有帮助。

.contain {
    height: /* max height you want */
    width: 95% /* max width you want */
    overflow: hidden;
}

我试过用col3和col9添加一行，并用col12＆col4 col4 col4添加相应的行，但是结果变得更加混乱。

应用Astik的更改后，屏幕看起来更好，没有空行/列。我仍然在所有列上看到溢出。另外，文本的填充/对齐在右侧不正确。这是造成问题的原因

 p {

 }
.p1 {
    color: gold;
 font-size: 3.8vw;
text-align: center;
 line-height: 60%;
 margin-top: 5px;
}

ul{
list-style-type: none;
padding-left: 0;

}
li{
 list-style-type: none;
}
col-xs-*{

}
.col-xs-npr{
    padding-right: 0;
}
.col-xs-npl{
    padding-left: 0;
}
.col-xs-smpr{
    padding-right: 3px;
}
.col-xs-smpl{
    padding-left: 3px;
}
}

最佳答案

最后，我设法通过在Firefox中打开页面并在检查器中仔细查看呈现的html（Ctrl + Shift + i）解决了该问题。

从那里，我能够看到哪些部分正在填充数据。最后，我的for循环不在正确的位置。此外，我发现使用if语句时需要将模板标签放入div标签中。

                <div class="tab-pane" id="{{vg.grouper.id}}{{fg.grouper.id}}besok">
                <div class="row">
                        {% for sg in show_list2 %}
                        {% for sh in sg.list %}
                <div class="col-xs-4 col-xs-npr col-xs-smpl">
                    <div class="content">

                        {% if not sg.grouper %}
                        <div class="content">
                            {% ifchanged %}<p class=p2>{% tomorrow "%a, %d %b" %}</p>{% endifchanged %}
                            <p class=p1>{{ sh.show_time_tomorrow }}</p>
                        </div>
                      </div>
                    </div>
                        {% endfor %}
                        {% endfor %}
                    </div>
                </div>