@LafTomas
начинающий веб-дизайнер

Где ошибка в сетке bootstrap 4?

Добрый вечер! возник следующий вопрос:
есть у меня footer,который состоит из 2 частей. каждая часть содержит по 3 блока,которые отображаются в ряд. То есть, если пользователь просматривает сайт с ipad-а и выше(>768px),то каждая часть отображается по три блока,если меньше то по одному.
Собственно вот пытался сделать так(Bootstrap 4):
<footer class="container">
		<div class="row">
			<div class="col-md-4 col-sm-12">
				text
			</div>
			<div class="col-md-4 col-sm-12">
				text
			</div>
			<div class="col-md-4 col-sm-12">
				text
			</div>
		</div>
		<div class="row ">
			<div class="col-md-4 col-sm-12 ">text</div>
			<div class="col-md-4 col-sm-12 ">
				<ul class="list-group list-group-horizontal ">
					<li class="list-group-item "><a href="" class="white"><i class="fa fa-facebook"
								aria-hidden="true"></i></a></li>
					<li class="list-group-item "><a href="" class="white"><i class="fa fa-vk" aria-hidden="true"></i>
						</a></li>
					<li class="list-group-item "><a href="" class="white"><i class="fa fa-instagram"
								aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="col-md-4 col-sm-12 ">text</div>
		</div>
	</footer>

Однако при просмотре на экране ниже 768px,он все равно отображает по 3 блока в ряд.Подскажите пожалуйста в чем ошибка
  • Вопрос задан
  • 43 просмотра
Решения вопроса 2
AntonLitvinenko
@AntonLitvinenko
HTML coder
закинул в песочницу, все работает. смотрите в инспекторе что происходит
Ответ написан
@LafTomas Автор вопроса
начинающий веб-дизайнер
Может кому будет полезно
Да,ошибка в следствии моей тупости:
в head забыл закинуть
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

сам footer выглядит таким образом и все работает:
<footer class="footer-bg">
<div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-12">
        text
      </div>
      <div class="col-md-4 col-sm-12">
        text
      </div>
      <div class="col-md-4 col-sm-12">
        text
      </div>
    </div>
 </div>
<div class="container">
    <div class="row ">
      <div class="col-md-4 col-sm-12 ">text</div>
      <div class="col-md-4 col-sm-12 ">
        <ul class="list-group list-group-horizontal ">
          <li class="list-group-item "><a href="" class="white"><i class="fa fa-facebook"
                aria-hidden="true"></i></a></li>
          <li class="list-group-item "><a href="" class="white"><i class="fa fa-vk" aria-hidden="true"></i>
            </a></li>
          <li class="list-group-item "><a href="" class="white"><i class="fa fa-instagram"
                aria-hidden="true"></i></a></li>
        </ul>
      </div>
      <div class="col-md-4 col-sm-12 ">text</div>
    </div>
</div>
  </footer>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Tennisi Москва
от 170 000 ₽
Cloud4Y Ярославль
от 65 000 до 130 000 ₽
Voodoo Lab Воронеж
от 50 000 до 70 000 ₽
22 февр. 2020, в 08:13
100 руб./за проект
22 февр. 2020, в 06:44
500 руб./за проект
22 февр. 2020, в 06:32
70000 руб./за проект