html - Bootstrap 卡内联 block

Question

我在模态上使用 bootstrap 4 卡片。问题是，无论我使用多少张卡片，它都会将所有卡片排成一排。我想要连续最多 3 张卡片。第二个问题是，当我调整它的大小时，卡片会太紧并且无法穿透。

我试过用

display: inline-block;

但没用。

  <div class="portfolio-modal mfp-hide" id="labrador-modal">
    <div class="portfolio-modal-dialog bg-white">
      <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
        <i class="fa fa-3x fa-times"></i>
      </a>
      <div class="container text-center">
        <div class="card-group">
          <div class="card" style="margin-right: 10px;">
            <img class="card-img-top" src="img/labradorok/Russel/1.jpg" alt="Russel">
            <div class="card-body">
              <h5 class="card-title">Midnight Sun Sea Romance "Russel"</h5>
              <p class="card-text">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Színe: Fekete/Black</li>
                  <li class="list-group-item">Születési idő: 2007.11.24.</li>
                  <li class="list-group-item">Csípő: HD-A (free)</li>
                  <li class="list-group-item">Könyök: 0-0 (mentes / free)</li>
                  <li class="list-group-item">Szem: mentes (free)</li>
                  <li class="list-group-item">prcd-PRA: mentes (szülők által)</li>
                  <li class="list-group-item">EIC: mentes (free)</li>
                  <li class="list-group-item">Képességvizsga: vizsga ideje: 2013.04.20.</li>  
                </ul>
                <div class="btn-group mr-2" role="group" aria-label="First group" style="margin-top:10%;">

                  <a class="btn btn-primary" href="img/torzskonyvek/Midnight-Sun-See-Romance-pedigree.pdf" role="button">Törzskönyv</a>
                </div>
                <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                  <a class="btn btn-primary" href="img/eredmenyek/Midnight-Sun-See-Romance-show.pdf" role="button">Eredmények</a>
                </div>
                <div class="labrador">
                  <a href="img/labradorok/Russel/Osei/1.jpg">
                    <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                      <button type="button" class="btn btn-primary">Ősei</button>
                    </div>
                  </a>
                  <a href="img/labradorok/Russel/Osei/2.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/3.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/4.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/5.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/6.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/7.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/8.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/9.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/10.jpg"></a>

            </div>
                <div class="labrador">
                <a href="img/labradorok/Russel/1.jpg">
                  <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                    <button type="button" class="btn btn-primary">Képek</button>
                  </div>
                </a>
                <a href="img/labradorok/Russel/2.jpg"></a>
                <a href="img/labradorok/Russel/3.jpg"></a>
                <a href="img/labradorok/Russel/4.jpg"></a>
                <a href="img/labradorok/Russel/5.jpg"></a>

          </div>




              </p>

            </div>
          </div>
          <div class="card w-50" style="margin-right: 10px;">
            <img class="card-img-top" src="img/labradorok/Russel/1.jpg" alt="Russel">
            <div class="card-body">
              <h5 class="card-title">Midnight Sun Sea Romance "Russel"</h5>
              <p class="card-text">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Színe: Fekete/Black</li>
                  <li class="list-group-item">Születési idő: 2007.11.24.</li>
                  <li class="list-group-item">Csípő: HD-A (free)</li>
                  <li class="list-group-item">Könyök: 0-0 (mentes / free)</li>
                  <li class="list-group-item">Szem: mentes (free)</li>
                  <li class="list-group-item">prcd-PRA: mentes (szülők által)</li>
                  <li class="list-group-item">EIC: mentes (free)</li>
                  <li class="list-group-item">Képességvizsga: vizsga ideje: 2013.04.20.</li>  
                </ul>
                <div class="btn-group mr-2" role="group" aria-label="First group" style="margin-top:10%;">

                  <a class="btn btn-primary" href="img/torzskonyvek/Midnight-Sun-See-Romance-pedigree.pdf" role="button">Törzskönyv</a>
                </div>
                <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                  <a class="btn btn-primary" href="img/eredmenyek/Midnight-Sun-See-Romance-show.pdf" role="button">Eredmények</a>
                </div>
                <div class="labrador">
                  <a href="img/labradorok/Russel/Osei/1.jpg">
                    <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                      <button type="button" class="btn btn-primary">Ősei</button>
                    </div>
                  </a>
                  <a href="img/labradorok/Russel/Osei/2.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/3.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/4.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/5.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/6.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/7.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/8.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/9.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/10.jpg"></a>

            </div>
                <div class="labrador">
                <a href="img/labradorok/Russel/1.jpg">
                  <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                    <button type="button" class="btn btn-primary">Képek</button>
                  </div>
                </a>
                <a href="img/labradorok/Russel/2.jpg"></a>
                <a href="img/labradorok/Russel/3.jpg"></a>
                <a href="img/labradorok/Russel/4.jpg"></a>
                <a href="img/labradorok/Russel/5.jpg"></a>

          </div>




              </p>

            </div>
          </div>
          <div class="card">
            <img class="card-img-top" src="img/labradorok/Russel/1.jpg" alt="Russel">
            <div class="card-body">
              <h5 class="card-title">Midnight Sun Sea Romance "Russel"</h5>

                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Színe: Fekete/Black</li>
                  <li class="list-group-item">Születési idő: 2007.11.24.</li>
                  <li class="list-group-item">Csípő: HD-A (free)</li>
                  <li class="list-group-item">Könyök: 0-0 (mentes / free)</li>
                  <li class="list-group-item">Szem: mentes (free)</li>
                  <li class="list-group-item">prcd-PRA: mentes (szülők által)</li>
                  <li class="list-group-item">EIC: mentes (free)</li>
                  <li class="list-group-item">Képességvizsga: vizsga ideje: 2013.04.20.</li>  
                </ul>
                <div class="btn-group mr-2" role="group" aria-label="First group" style="margin-top:10%;">

                  <a class="btn btn-primary" href="img/torzskonyvek/Midnight-Sun-See-Romance-pedigree.pdf" role="button">Törzskönyv</a>
                </div>
                <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                  <a class="btn btn-primary" href="img/eredmenyek/Midnight-Sun-See-Romance-show.pdf" role="button">Eredmények</a>
                </div>
                <div class="labrador">
                  <a href="img/labradorok/Russel/Osei/1.jpg">
                    <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                      <button type="button" class="btn btn-primary">Ősei</button>
                    </div>
                  </a>
                  <a href="img/labradorok/Russel/Osei/2.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/3.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/4.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/5.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/6.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/7.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/8.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/9.jpg"></a>
                  <a href="img/labradorok/Russel/Osei/10.jpg"></a>

            </div>
                <div class="labrador">
                <a href="img/labradorok/Russel/1.jpg">
                  <div class="btn-group mr-2" role="group" aria-label="Second group" style="margin-top:10%;">
                    <button type="button" class="btn btn-primary">Képek</button>
                  </div>
                </a>
                <a href="img/labradorok/Russel/2.jpg"></a>
                <a href="img/labradorok/Russel/3.jpg"></a>
                <a href="img/labradorok/Russel/4.jpg"></a>
                <a href="img/labradorok/Russel/5.jpg"></a>

          </div>            
            </div>
          </div>

          </div>
          </div>
          </div>
          </div>

这是我用 3 张卡片得出的结果: https://i.gyazo.com/f9eaf705003c1f0d9c9902d18b72a10a.png

看起来不错，但如果我再加一张，卡片就太紧了。调整页面大小时遇到​​同样的问题: https://i.gyazo.com/5da34159b9ac878fa3b416d8ebda4303.png

Answer 1

您可以使用 flexbox 并在窗口变窄时使用 wrap 来适应卡片。将这些 css 属性添加到卡片组 div

display: flex;
flex-wrap: wrap;

或者将 bootstrap flex 和 wrap 类添加到 card-group div

<div class="card-group d-flex flex-wrap">

然后给所有卡片一个默认的宽度值，比如width: 300px