引导卡内联块

时间：2019-06-02 08:49:11

标签： html css bootstrap-4

我在模态上使用引导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

1 个答案:

答案 0 :(得分：0)

您可以使用flexbox，并且当窗口变窄时，请使用wrap来适合卡片。将这些CSS属性添加到card-group div 

display: flex;
flex-wrap: wrap;

或将bootstrap flex并包装类到card-group div 

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

并为所有卡片提供默认的宽度值，例如 width：300px

相关问题
最新问题