Zusammenklappbare div verschiebt andere Elemente, wenn es zusammenbricht und es funktioniert für ein Element auf der Schleife

Question

Ich ziehe Daten aus der Datenbank und Schleife durch jedes Element mit einer foreach-Schleife, die Daten zurückgegeben wird, aber die kollabierende Ansicht funktioniert für die erste Nur Artikel und der dritte Artikel wird verschoben, wenn der erste Artikel zusammengelegt wird. Dies ist der Code, den ich auf der HTML-Ansicht haben:

<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> 

Und das sind die Bilder zeigen, was mein Problem ist:

Bitte helfen.

Answer 1

Sie diese CSS verwenden können,

.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

Sie Bootstrap cols verwenden Elemente in einem Raster anzupassen, und den Inhalt in jedem der Post flexibel ist vertikal, die in Ergebnispositionen inkonsistent Höhe haben, so dass das Problem ist, dass die Bootstrap-Spalten Float verwenden, um Elemente voreinander zu platzieren, und Float das Layout von der zweiten Zeile stört, wenn Elemente inkonsistente Höhe haben. Lösung dieses Problems ist ein wenig Hack auf die cols, die ich und die Nutzung bevorzugen, aber Sie können andere Lösungen versuchen, für Ihren Fall diese verwenden

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

Hoffe, es wird das Problem zu beheben