CSS скрыть элемент в bootstrap4 `card`, когда столбцы маленькие - PullRequest
Новая
       16

CSS скрыть элемент в bootstrap4 `card`, когда столбцы маленькие

0 голосов
/ 21 апреля 2020

У меня макет сетки карт . до 12 карт изображений в строке, естественно, карты становятся довольно маленькими с 12 картами, и я хотел бы показать только изображение в этом случае, однако, когда длина строки равна 6, я хотел бы также показать описание ,

Я попробовал утилиты d-none d-sm-block, но они определяются в окне просмотра, а не в размере карты в столбце 

<div class="d-flex flex-row flex-wrap">
  <div class="col-md-4">
    <div class="card mb-5 border-0">
      <a class="link" href="{{pathFor 'thing.page' id=_id}}" >
        <img src="{{getImage}}" class="card-img-top img-fluid" alt="">
      </a>
      <div class="card-body">
        <p class="card-text">
          text 1
        </p>
        <p class="card-text">
          text 2
        </p>
      </div>
    </div>
  </div>
</div>

col-md-4 Я меняю динамически в зависимости от суммы столбцов, которые установил пользователь.

Я хочу, чтобы card-text скрывался, когда есть 12 столбцов (карта меньшего размера), но не при наличии 5 столбцов!

вот изображение: https://www.dropbox.com/s/ixjz1039fwylowu/Screenshot%202020-04-22%2000.00.54.png?dl=0

и здесь

https://www.dropbox.com/s/ixjz1039fwylowu/Screenshot%202020-04-22%2000.00.54.png?dl=0

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

Проверьте эти карты, я использую сетку на 12 столбцов для всех устройств, больших, маленьких, очень маленьких (мобильных) устройств, а также для отображения класса d-none: нет для всех устройств.

Теперь вы можете видеть и использовать, когда захотите, у меня просто есть пример, как вы можете его использовать? 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
     
    <div class="container">
      <div class="row my-3">
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 1</div>
          </div>
        </div>
        
         <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 2</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 3</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 4</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 5</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 6</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 7</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 8</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 9</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 10</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 11</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
       		 <div class="card-body d-block d-lg-none text-center">card 12</div>
          </div>
        </div>
        
      </div>
    </div>

    </body>
    </html>

Проверьте эти карты, я использую сетку для 12, 6, столбец для всех устройств, больших, маленьких, очень маленьких (мобильных) устройств, а также использую класс d-none для дисплей: нет для всех устройств.

Теперь вы можете видеть и использовать, когда захотите, у меня есть только пример, как вы можете его использовать? 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="row my-3">
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-xs-none">
      <div class="card">
   		 <div class="card-body text-center">card 1</div>
      </div>
    </div>
    
     <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-sm-none">
      <div class="card">
   		 <div class="card-body text-center">card 2</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
      <div class="card">
   		 <div class="card-body text-center">card 3</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-xs-none">
      <div class="card">
   		 <div class="card-body text-center">card 4</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-sm-none">
      <div class="card">
   		 <div class="card-body text-center">card 5</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
      <div class="card">
   		 <div class="card-body text-center">card 6</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-xs-none">
      <div class="card">
   		 <div class="card-body text-center">card 7</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-sm-none">
      <div class="card">
   		 <div class="card-body text-center">card 8</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
      <div class="card">
   		 <div class="card-body text-center">card 9</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-xs-none">
      <div class="card">
   		 <div class="card-body text-center">card 10</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-sm-none">
      <div class="card">
   		 <div class="card-body text-center">card 11</div>
      </div>
    </div>
    
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
      <div class="card">
   		 <div class="card-body text-center">card 12</div>
      </div>
    </div>
    
  </div>
</div>

</body>
</html>
0 голосов
/ 21 апреля 2020

Он работает с d-block d-lg-none.

Я сохраняю 12 карт в 1200px и после разрешения и сохраняю 6 карт до 1200px.

Если вы хотите изменить разрешение, вы необходимо заменить lg в двух местах.

1-й в col-2 col-lg-1 и второй в d-block d-lg-none

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...