Не могу найти отзывчивые карты в Bootstrap 4 - PullRequest
Новая
       61

Не могу найти отзывчивые карты в Bootstrap 4

0 голосов
/ 30 января 2020

Я только что создал новый сайт с нуля, используя Bootstrap 4. Я создал контейнер с жидкостью, затем в него я вставил сетку с 8 столбцами, а в каждый из этих 8 столбцов я вставил карточку с изображениями.

Все выглядело хорошо, пока я не понял, что это не отзывчиво. На самом деле в xl карты показываются по 4 подряд, но в lg все карты складываются вертикально, как при просмотре на телефоне.

Попробуйте, как я мог, я не могу заставить карты реагировать, нет независимо от того, сколько я играю с классами col.

Может ли кто-нибудь помочь мне заставить эту вещь реагировать? По сути, я хотел бы, чтобы карты были 4 на xl (это то, что они делают сейчас), 3 на lg и 2 на md, sm и xs. Опять же, сейчас он показывает 4 в xl и только 1 (в вертикальном положении) для всех других размеров.

Это мой первый раз здесь, и, надеюсь, после того, как я наберу это, я смогу включить некоторый код. Очень ценится.

Пример кода: 

 <div class="container-fluid"> 
    <!--Image Grid-->
    <div class="row"> 
      <!--Real people Reel-->
      <div class="col-xl-3">
        <div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
        <div class="card-body">
          <h5 class="card-title">Real People Reel</h5>
          <p class="card-text text-open-sans">Your greatest and most credible asset.</p>
          <br>
          <br>
        </div>
      </div>
      <!--End Real People Reel--> 

      <!--University Hospital Newark-->
      <div class="col-xl-3">
        <div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
        <div class="card-body">
          <h5 class="card-title">University Hospital Newark</h5>
          <p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
          <br>
          <br>
        </div>
      </div>
      <!--End University Hospital Newark-->

1 Ответ

0 голосов
/ 30 января 2020

Я думаю, что каждый «элемент» в строке, вставьте туда отзывчивый класс. 

<div class="container-fluid"> 
    <!--Image Grid-->
    <div class="row"> 
        <!--Real people Reel-->
        <div class="col-xl-3 col-lg-4 col-md-6"> <!-- add new class here -->
            <div class="card"> <!-- remove class here -->
            <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
            <div class="card-body">
                <h5 class="card-title">Real People Reel</h5>
                <p class="card-text text-open-sans">Your greatest and most credible asset.</p>
            </div>
        </div>
        <!--End Real People Reel--> 

        <!--University Hospital Newark-->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card">
                <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
                <div class="card-body">
                    <h5 class="card-title">University Hospital Newark</h5>
                    <p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
                </div>
            </div>
        </div>
        <!--End University Hospital Newark--> 
    </div>
</div>

Кстати, посетите W3School для получения дополнительной информации о Bootstrap 4 сеточной системе

Так что я надеюсь, что это поможет вам.

...