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

Bootstrap-4使您可以使用.card-group或.card-deck获得相同的宽度和高度列卡，但从4.0-beta开始，这些选项尚未响应。

列中的卡片互相听取

1 个答案: