cactusyou

Блоки наезжают друг на друга при просмотре со смартфона bootstrap

Recommended Posts

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

перепробовала уже много чего и не могу понять в чем все-таки проблема. 

вот код: https://jsfiddle.net/6jgoewz5/

http://piccy.info/view3/12360772/8e3e730ee144105131409f09bbe3231f/  

как можно исправить?

Share this post


Link to post
Share on other sites

Здравствуйте.

Колонки в bootstrap автоматически идут одна за другой, в Вашей вёрстке тоже. Скорее всего проблема в картинке, которая абсолютно позиционированна.

Попробуйте этот код:

.gradient-square {    
    width: 195px;    
}
@media screen and (min-width: 768px) {
	.gradient-square {
		position: absolute;
		z-index: 30;
	}
}

 

Share this post


Link to post
Share on other sites

 

	<div class="col-md-6  right-section ">

Немного не по теме, но вроде бы очень не рекомендуется ставить кастомные классы в служебный бутстраповский контейнер. Или пофиг? 

Share this post


Link to post
Share on other sites
9 часов назад, Raritet сказал:

 


	<div class="col-md-6  right-section ">

Немного не по теме, но вроде бы очень не рекомендуется ставить кастомные классы в служебный бутстраповский контейнер. Или пофиг? 

Лишь бы работало же, не так ? :mellow:

Share this post


Link to post
Share on other sites
10 часов назад, Raritet сказал:

 


	<div class="col-md-6  right-section ">

Или пофиг? 

Нет не пофиг. Код должен работать как ожидается изначально, из коробки.

Если требуется внести кастомные стили в ячейку, то я бы создал класс со свойствами и внёс изменения. Так, по моему мнению, органичнее и понятнее с точки зрения чтения и поддержки кода.

Share this post


Link to post
Share on other sites
В 30.05.2018 в 22:47, klierik сказал:

Нет не пофиг. Код должен работать как ожидается изначально, из коробки.

Если требуется внести кастомные стили в ячейку, то я бы создал класс со свойствами и внёс изменения. Так, по моему мнению, органичнее и понятнее с точки зрения чтения и поддержки кода.

Вообще да. лезть в сетку не следует, ну если только сильно хочется). Хотя классы я лично присваиваю в целях изменения свойств flexbox например. Проще добавить 1 свой, чем добавлять кучу от бутстрапа. Да и для наследования удобно

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By Та Вернер
      Здравствуйте такой вопрос! 
      Верстаю первый месяц решил запилить сайтик, запилить до запили. Не могу сделать мобильную версию пробую третий раз, конечно есть успехи со всеми этими media запросами разобрался так как вожусь вторую неделю. Все понимал до момента пока не зашёл в тупик одним словом, кто нибудь может сказать может были такие у вас ошибки, но вот в чем дело когда сижу через консоль разроботчика адаптивка со всеми моими media запросами выглядит супер только начинаю заливать на хостинг выскакивает вот такой треш? Сам сайт с левой стороны, с правой стороны очень много свободного места, хотелось бы узнать что я сделал не так, и как быть в сложившийся ситуации? Искренен благодарен тем кто ответит) 

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
  • Member Statistics

    46,700
    Total Members
    3,128
    Most Online
    VovkaKrut
    Newest Member
    VovkaKrut
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.