Загрузочные карты inline-block - PullRequest
Новая
       2

Загрузочные карты inline-block

0 голосов
/ 02 июня 2019

Я использую бутстрап 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 голосов
/ 02 июня 2019

Вы можете использовать flexbox, а когда окно сужается, используйте обтекание для размещения карточек.Добавьте эти свойства CSS в div группы карт 

display: flex;
flex-wrap: wrap;

Или добавьте классы начальной загрузки и обтекания в div группы карт 

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

И присвойте всем картам значение ширины по умолчанию, например ширина: 300px

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...