カラムに画像を挿入した後にオーバーフローする

Question

これは設定上の問題であることは知っていますが、私は全く新しく、答えを得るための正確な用語がわかりません。

私が最初の列と行の画像を挿入すると、私は第二列にオーバーフローを得るジャンゴ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; 
} 

IはCOL12 & COL4 COL4 COL4とCOL3とcol9とし、対応する行と列を追加しようとしたが、得られた流れは、はるかにごちゃ混ぜになりました。

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

に貢献している、私は（密接インスペクタでレンダリングされたHTMLでのFirefoxでページを開いて見ることによって、問題を解決するために管理はCtrl + Shift +私）。

そこから、どのセクションにデータが移入されているかを確認することができました。結局、私の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>