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＆amp; 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中打开页面并在Inspector中密切查看渲染的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>

在列中插入图像后溢出

1 个答案: