col-lg-2 col-md-4 col-6 не работает на bootstrap 4. В мобильной версии они отображаются с col-md-4, а не col-6 - PullRequest
Новая
       1

col-lg-2 col-md-4 col-6 не работает на bootstrap 4. В мобильной версии они отображаются с col-md-4, а не col-6

1 голос
/ 29 мая 2020 
<div class="container">
  <div class="row space">
         <div class="col-sm-12 col-md-4 col-lg-2">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-sm-12 col-md-4 col-lg-2">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
            <a href="#"><img src="" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
</div>
</div>

Это код, и на больших экранах они отображаются как col-2, но на средних и маленьких они отображаются как col-4.

Ответы [ 2 ]

0 голосов
/ 23 июля 2020

Для тех, кто, возможно, не читал комментарии к выбранному ответу:

Добавление необходимых Bootstrap метатегов, например, @ Orest , решило проблему для меня. 

<!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">
   ...
   </head>
...
</html>

Ссылка: https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter -шаблон

0 голосов
/ 29 мая 2020

Вероятно, вы проверяете его на устройстве другого размера. если вам нужно применить css для сверхмалых устройств, используйте col-6 (которого нет в приведенном выше коде) вместо col-sm-6. или могут быть оба в соответствии с вашим требованием. Пожалуйста, ознакомьтесь с инструкциями по использованию сетки bootstrap.

Система сеток Bootstrap 4 имеет пять классов: 

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

В вашем коде вы можете это сделать. 

<div class="container">
  <div class="row space">
         <div class="col-lg-2 col-md-4 col-sm-6 col-6">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4  col-sm-6 col-6">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4  col-sm-6 col-6">
            <a href="#"><img src="" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...