Bootstrap 4 - Spalten werden horizontal nebeneinander gestapelt

Question

Ich habe ein Akkordeonelement auf meiner Seite, und das div, das ich beim Klicken auf den Button zeige, hat 2 Spalten, die jeweils md-5 Breite haben eine Reihe, aber das Problem, das ich habe, ist, dass, wenn ich das div öffne, die Spalten gestapelt sind, anstatt nebeneinander horizontal auf breiteren Bildschirmen, warum ist das?

  <div class="row collapse" id="infoData"> 
      <div class="col-md-5"> 
       <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p> 
       <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p> 
       <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p> 
      </div> 
      <div class="col-md-5"> 
       <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p> 
       <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p> 
       <p><img src="/icons/football-field.svg" class="icon">Left foot</p> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col-md-10"> 
       <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData"> 
       See more 
       </a> 
      </div> 
      </div> 

Here ist die Geige.

Answer 1

Dies geschieht aufgrund der Art und Weise, wie "Kollaps" funktioniert.

Bootstrap 4 verwendet CSS3 Display: flex auf den DIVs der Klasse Reihe

Dies steht im Widerspruch mit der Tatsache, dass der ‚Zusammenbruch‘ Code zur Verfügung gestellt nicht die DIV Rückkehr zu seinem ursprünglichen Anzeigeeigenschaft ist, sondern setzt es auf display: block, wodurch Bootstrap 4 nicht richtig funktioniert.

Wenn Sie die Zeile innerhalb Ihres Kollaps-Bereichs stattdessen verschachteln, funktioniert sie wie gewünscht (Geige here).

Nur eine Anmerkung zur Verwendung von JSFiddle für dies, denken Sie daran, dass col-md-* Klassen werden als volle Breite unterhalb der Größe 'md' Bildschirme erscheinen, und so die kleine Render-Box auf JSFiddle kann irreführend sein, es sei denn, Sie erweitern.

<div class="collapse" id="infoData"> 
 
    <div class="row"> 
 
    <div class="col-md-5"> 
 
     <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p> 
 
     <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p> 
 
     <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p> 
 
    </div> 
 
    <div class="col-md-5"> 
 
     <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p> 
 
     <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p> 
 
     <p><img src="/icons/football-field.svg" class="icon">Left foot</p> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
<div class="row"> 
 
    <div class="col-md-10"> 
 
    <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData"> 
 
        See more 
 
        </a> 
 
    </div> 
 
</div>