Bootstrap - Изменить стиль карты в зависимости от ширины контейнера - PullRequest
Новая
       25

Bootstrap - Изменить стиль карты в зависимости от ширины контейнера

0 голосов
/ 14 мая 2018

Я хочу показать разные виды карточек для средних и маленьких устройств. Мне нужно изменить стиль карты в зависимости от ширины контейнера. Для больших устройств у меня есть этот стиль карты: 

<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#">Project One</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
        </div>
      </div>
    </div>

А для средних и маленьких устройств мне нужно это: 

<div class="row">
    <div class="col-md-7">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-5">
      <h3>Project One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
      <a class="btn btn-primary" href="#">View Project</a>
    </div>
  </div>

Понятия не имею, как это сделать. Может кто-нибудь предложить лучший / самый оптимизированный способ для достижения этой цели?

1 Ответ

0 голосов
/ 16 мая 2018

Используйте Bootstrap Display Property, чтобы скрыть div в определенном размере экрана. https://getbootstrap.com/docs/4.0/utilities/display/

...