ブートストラップ4 - カラムが横に並べられずにスタックされています

Question

自分のサイトにアコーディオン要素があり、ボタンをクリックして表示されているdivに2列あり、それぞれにmd-5幅がありますしかし、私が問題になるのは、divを開くと、列が横に並べられ、幅の広い画面で横に横に並べられているということです。それはなぜですか？

  <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はフィドルです。

Answer 1

これは「崩壊」の仕組みのために発生しています。

ブートストラップ4は、CSS3のディスプレイを使用しています：クラス行のdiv要素に曲げる提供「崩壊」のコードは、それが元の表示プロパティだとDIVを返しますが、その代わりにそれを設定していないという事実と、この競合

bootstrap 4が正しく動作するのを止めます。

欄を畳み込みdivの内側に入れ子にしておくと、希望通りに機能します（fiddle here）。

col-md- *クラスは、サイズ 'md'スクリーンの下で全幅で表示されるので、JSFiddleの小さなレンダリングボックスは、展開しない限り誤解を招く可能性があることに注意してください。

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