Проблемы с использованием Card-img-overlay со столбцами карт - PullRequest
Новая
       10

Проблемы с использованием Card-img-overlay со столбцами карт

1 голос
/ 03 февраля 2020

Я использую Bootstrap 4.4 для создания столбца карты: 

<!DOCTYPE html>
<html>
    <head>
        <title>Problems using Card-img-overlay with card-columns</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body>

        <div class="card-columns" style="padding-top: 2%;">

            <div class="card">
              <img class="card-img" src="https://source.unsplash.com/user/erondu/1920x1080" style="opacity: 65%;">
              <div class="card-img-overlay">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle">Subtítulo do cartão</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
                <a class="btn btn-outline-light" href="">Leia mais</a>
              </div>
            </div>
      
            <div class="card bg-danger text-white mb-2">
              <div class="card-header">
                Cabeçalho do cartão
              </div>
              <div class="card-body">
                <h4 class="card-title">Título do cartão</h4>
                <h6 class="card-subtitle">Subtítulo do cartão</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
                <a class="btn btn-outline-light" href="">Leia mais</a>
              </div>
            </div>
            
            <div class="card bg-primary text-white mb-2">
              <div class="card-header">
                Cabeçalho do cartão
              </div>
              <div class="card-body">
                <h4 class="card-title">Título do cartão</h4>
                <h6 class="card-subtitle">Subtítulo do cartão</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
                <a class="btn btn-outline-light" href="">Leia mais</a>
              </div>
            </div>
      
            
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">Título do cartão</h4>
                <h6 class="card-subtitle">Subtítulo do cartão</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
                <a class="btn btn-outline-primary" href="">Leia mais</a>
              </div>
            </div>
      
            <div class="card">
      
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="">Link 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="">Link 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="">Link 3</a>
                  </li>
                </ul>
              </div>
        
              <div class="card-body">
                <h4>Título do cartão</h4>
                <h6>Subtítulo do cartão</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
                <a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
              </div>
              
            </div>
      
      
            <div class="card bg-success text-white mb-2">
              <div class="card-header">
                Cabeçalho do cartão
              </div>
              <div class="card-body">
                <h4 class="card-title">Título do cartão</h4>
                <h6 class="card-subtitle">Subtítulo do cartão</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
                <a class="btn btn-outline-success" href="">Leia mais</a>
              </div>
            </div>
      
          </div>

        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>

</html>

Проблема с картой, которую я использую Card-img-overlay. Когда экран имеет более высокое разрешение, отображение происходит, как и ожидалось:

Working

Когда экран меньше:

Part of the casing omitted and image does not fit

Часть мяса и его содержимое опущены. Я пробовал отступ сверху, но он не работает должным образом.

Кроме того, я не могу сделать изображение подходящим. Я пытался получить вертикально увеличенное изображение, но все, что я могу получить, - это то, что карта занимает место, соответствующее высоте изображения.

Как предотвратить наложение содержимого на другую карту? и чтобы изображение всегда занимало все пространство карты?

Ответы [ 2 ]

2 голосов
/ 03 февраля 2020

Это потому, что родительский элемент div в card-img-overlay не установлен в относительный и не имеет фиксированной высоты. Установите минимальную высоту для родительского элемента div (т.е. .card), чтобы он не уменьшался при уменьшении области просмотра. 

  .card {
    min-height: 300px;
    position: relative; 
  }

https://jsfiddle.net/svwb6r31/

1 голос
/ 03 февраля 2020

Я думаю, bootstrap способ реализации этой идеи не самый лучший. Элемент с position: absolute извлекает DOM и не может соответствовать его содержимому.

Я предлагаю заменить .card-img-overlay на .card-body и вместо <img> сделать div на изображение в качестве фона и параметры, как во фрагменте. 

.bg-img {
  opacity: 65%;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url(https://source.unsplash.com/user/erondu/1920x1080);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.bg-img + .card-body {
  position: relative;
  z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
  <title>Problems using Card-img-overlay with card-columns</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>

  <div class="card-columns" style="padding-top: 2%;">

    <div class="card">
      <div class="bg-img"></div>
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <h6 class="card-subtitle">Subtítulo do cartão</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
        <a class="btn btn-outline-light" href="">Leia mais</a>
      </div>
    </div>

    <div class="card bg-danger text-white mb-2">
      <div class="card-header">
        Cabeçalho do cartão
      </div>
      <div class="card-body">
        <h4 class="card-title">Título do cartão</h4>
        <h6 class="card-subtitle">Subtítulo do cartão</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
        <a class="btn btn-outline-light" href="">Leia mais</a>
      </div>
    </div>

    <div class="card bg-primary text-white mb-2">
      <div class="card-header">
        Cabeçalho do cartão
      </div>
      <div class="card-body">
        <h4 class="card-title">Título do cartão</h4>
        <h6 class="card-subtitle">Subtítulo do cartão</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
        <a class="btn btn-outline-light" href="">Leia mais</a>
      </div>
    </div>


    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Título do cartão</h4>
        <h6 class="card-subtitle">Subtítulo do cartão</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
        <a class="btn btn-outline-primary" href="">Leia mais</a>
      </div>
    </div>

    <div class="card">

      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <a class="nav-link active" href="">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="">Link 3</a>
          </li>
        </ul>
      </div>

      <div class="card-body">
        <h4>Título do cartão</h4>
        <h6>Subtítulo do cartão</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
        <a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
      </div>

    </div>


    <div class="card bg-success text-white mb-2">
      <div class="card-header">
        Cabeçalho do cartão
      </div>
      <div class="card-body">
        <h4 class="card-title">Título do cartão</h4>
        <h6 class="card-subtitle">Subtítulo do cartão</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
        <a class="btn btn-outline-success" href="">Leia mais</a>
      </div>
    </div>

  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

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

Похожие темы

...