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

Question

我知道这是一个单一的设置问题，但我是新手，不知道确切的术语是什么来获得我正在寻找的答案。

我在 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;
}
}

Answer 1

最后，我通过在 Firefox 中打开页面并在检查器 (Ctrl + Shift + i) 中仔细查看呈现的 html 来解决问题。

从那里我能够看到哪些部分正在填充数据。最后，我的 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>