列中的卡片互相傾聽

Question

我遇到了令人沮喪的問題。

我有一個容器，其中有一行三列。這些行合併堆疊在手機屏幕上。

當卡片中的內容超過一行時，將包裝到第二行。但是，這會造成不平衡。這將使卡片文本框的高度更長。

有什麼辦法讓卡片文本框的其餘部分採用更多文本框的高度？

此外，任何方式來解決令人討厭的零行距問題？

我在說話時加了一個小提琴。

乾杯， 安娜

小提琴：請注意，你需要程度上預覽平板或更高的寬度。

<div class="container content"> 
    <!-- Line-up --> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <h1 class="display-4 irie-red text-center">Dub Castle</h1> 
     <div class="card rounded"> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item text-center text-primary">Thursday</li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">4PM - 6PM</p> 
      <p>Chalice SoundsystemArtist Artist Artist ArtistArtist Artist Artist Artist</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">6PM - 8PM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">8PM - 10PM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">10PM - 12PM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">12PM - 2AM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">2AM - 3AM</p> 
      <p>Chalice Soundsystem Artist Artist Artist Artist</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <h1 class="display-4 text-center">Main Stage</h1> 
     <div class="card rounded"> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item text-center text-primary">Thursday</li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">4PM - 6PM</p> 
      <p>Mo'Kalamity & The Wizards</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">6PM - 8PM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">8PM - 10PM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">10PM - 12PM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">12PM - 2AM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">2AM - 3AM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <h1 class="display-4 text-muted text-center">Open Mind</h1> 
     <div class="card rounded"> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item text-center text-primary">Thursday</li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">4PM - 6PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">6PM - 8PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">8PM - 10PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">10PM - 12PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">12PM - 2AM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">2AM - 3AM</p> 
      <p>Kabouter Plop</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    </div> 
    <div class="row"></div> 
    <!-- Additional artist info --> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="card rounded youtube"> 
     <p class="text-center">Artist Info 1</p> 
     <div class="embed-responsive embed-responsive-16by9 rounded-iframe"> 
      <iframe src="https://www.youtube.com/embed/49XqJQRKU-0" frameborder="0"></iframe> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="card rounded youtube"> 
     <p class="text-center">Artist Info 2</p> 
     <div class="embed-responsive embed-responsive-16by9 rounded-iframe"> 
      <iframe src="https://www.youtube.com/embed/49XqJQRKU-0" frameborder="0"></iframe> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/DTcHh/

Answer 1

http://getbootstrap.com/docs/4.0/components/card/#card-layout

引導-4使您能夠得到相等的寬度和高度欄卡.card基團或.card甲板，但作爲4.0-β，這些選項還沒有響應。