Карты начальной загрузки, не сдвигающиеся вниз - PullRequest
Новая
       25

Карты начальной загрузки, не сдвигающиеся вниз

0 голосов
/ 21 сентября 2018

Я пытаюсь получить некоторую помощь с моими загрузочными картами.У меня есть 4 карты, которые простираются горизонтально по всей ширине страницы.При посещении веб-сайта на мобильном устройстве все они остаются горизонтальными, а затем растягиваются вертикально.Я хотел бы, чтобы они оставались друг на друге.Помощь будет оценена.Спасибо.

Изображения: https://imgur.com/a/W65324F

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="row">
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="/images/personal/harris.jpeg" alt="">
      <div class="card-body">
        <h4 class="card-title">Bill Harris</h4>
        <h6 class="card-subtitle mb-2 text-muted">Counselor</h6>
        <p class="card-text">Mr. Harris is going to be Maui for Halloween!</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/smigel" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="/images/personal/smiegel.jpeg" alt="">
      <div class="card-body">
        <h4 class="card-title">Emily Smigel</h4>
        <h6 class="card-subtitle mb-2 text-muted">Counselor</h6>
        <p class="card-text">Ms. Smigel is a Fullstack Developer.</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/harris" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="/images/personal/krzyminski.jpeg" alt="">
      <div class="card-body">
        <h4 class="card-title">Marcy Krzyminski</h4>
        <h6 class="card-subtitle mb-2 text-muted">Secretary</h6>
        <p class="card-text">Ms. Krzyminski is a computer repair technician.</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/krzyminski" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/550x550" alt="">
      <div class="card-body">
        <h4 class="card-title">Patti Walther</h4>
        <h6 class="card-subtitle mb-2 text-muted">Secretary</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/walther" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Вы можете использовать flexbox и медиазапросы для решения этой проблемы: 

@media (max-width: 600px) {
  .row{
    display: flex;
    flex-direction: column;
  }
}

, где .row - контейнер карт

0 голосов
/ 21 сентября 2018

Чтобы отрегулировать количество столбцов, которые элементы будут загружать в Bootstrap, используйте медиазапросы и col-X-n, где X - размер экрана в xs, sm и т. Д., А n - количество столбцов (1-12).

В вашем случае добавление класса col-xs-6 сделает так, чтобы ваша 4-колоночная компоновка разбивалась на 2 столбца с меньшей шириной.col-xs-12 вместо этого даст вам 1 столбец.

Вот точная ссылка на точку останова, реагирующая на Bootstrap для хорошей меры!

...