折りたたみ可能なdivは、折りたたみ時に他のアイテムを移動させ、ループ上の1つのアイテムに対して機能します

Question

データベースからデータを引き出し、foreachループを使用してすべてのアイテムをループしています。データは返されますが、最初のアイテムが折りたたまれたときに3番目のアイテムが移動します。これは私がHTMLビューで持っているコードです： ​​

助けてください：

<div class="content-side col-md-8 col-sm-12 col-xs-12"> 

      @{ 
       foreach (var news in Model) 
       { 
        <div class="col-md-6 col-sm-6 col-xs-12"> 

         <div class="single-item wow fadeInUp animated animated animated animated"> 
          <div class="img-box"> 
           <div class="img-holder"> 
            <figure><a href="#"><img src="@news.file.Url" alt=""></a></figure> 
           </div> 
          </div> 
          <div class="news-content"> 
           <h4><a href="#">@news.Header</a></h4> 

            <div class="collapse" id="collapseExample"> 

              @news.Description 

             </div> 

           <div class="show-more"> 
            <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Read More</a> 
           </div> 
          </div> 
         </div> 
        </div> 
       } 
      } 

     </div> 

そして、これらは私の問題が何であるかを示すイメージです。あなたはポストのそれぞれに、グリッド内の項目、およびコンテンツを調整するために、ブートストラップのcolsを使用しているあなたはこのCSSを使用することができます

Answer 1

、

.content-side{ 
font-size:0px; 
} 
.content-side .col-md-6{ 
float:none!important; 
display:inline-block; 
vertical-align:top; 
font-size:14px; 
} 
.content-side>*{ 
font-size:14px; 
} 

Answer 2

は、一貫性のない高さを持っているので、問題は結果項目内のどの垂直方向に柔軟ですブートストラップ・コラムは、フロートを使用してアイテムを互いの前に置くことで、要素の高さが不一致のときに、フロートが2番目の行からレイアウトを妨害することです。あなたを投稿することができ、これに ソリューションは、私が好むCOLSと使用に少しハックですが、あまりにも他のソリューションを試すことができ、あなたのケースで使用するために、この

`.content-side div[class^="col-"]{ 
float:none !important; 
display: inline-block; 
vertical-align:top; 
margin-right: -4px; 
}` 

は、それが