Установка одной карты на ряд Bootstrap 4 - PullRequest
Новая
       1

Установка одной карты на ряд Bootstrap 4

0 голосов
/ 01 марта 2019

Я пытаюсь заставить загрузчик показать 1 карту на ряд на маленьких экранах, 2 карты на ряд на средних экранах и 3 карты на ряд на больших экранах.

Я пытаюсь сделать этоиспользуя <div class="col-sm-12 col-md-6 col-lg-4">, который работает для экранов среднего и большого размера, но для экранов небольшого размера он по-прежнему показывает 2 вместо 1 карты в ряду.

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

Вот ссылка на мой код: https://codepen.io/anon/pen/ZPQWKd

Ответы [ 3 ]

0 голосов
/ 01 марта 2019

в Bootstrap-4, используйте класс col-{number} для небольших устройств

пример: col-12: сетка из 12 столбцов в небольших устройствах 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="row">
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
           <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <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>
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
       <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549805308-061c5e00ff9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <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>
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
       <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549948558-1c6406684186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <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>
    </div>

  </body>
</html>
0 голосов
/ 01 марта 2019

Надеюсь, это поможет вам .. Я добавлю объяснение, если это то, что вы ищете.спасибо

https://codepen.io/Xenio/pen/KEVazw?editors=110088

0 голосов
/ 01 марта 2019

Для мобильного телефона вы можете попробовать использовать col-xs class ..

, поэтому вместо 

<div class="col-sm-12 col-md-6 col-lg-4">

вы можете использовать 

<div class="col-sm-12 col-md-6 col-lg-4 col-xs-12">

дополнительную документацию вы можете посмотреть здесь https://getbootstrap.com/docs/4.1/layout/grid/

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

Нет похожих вопросов

...