Задать вопрос
@lucaslucky
bootstrap

Почему контейнер не принимает нужных значений Bootstrap?

Доброго дня. Недавно начал работать с Bootstrap. Использую версию 3.2.0. Столкнулся с проблемой - на планшете iPad с шириной экрана 768px ширина контейнера должна быть 750px, однако на айпаде он гораздо уже. На сервисе ProtoFluid всё выглядит так, как нужно. В чём может быть проблема? Скриншоты прилагаю. Если нужно скинуть какой-нибудь код, будьте добры, напишите что именно. Благодарю за внимание.
iPad: 6334051m.jpg
Нормальный вариант:
6160404m.jpg

<body>
<div id="all">
<div id="menu-top">
	<div class="container">
		<div class="row">
    		<div class="menu-top-fonts">
            	<div class="col-lg-2 col-md-2 col-sm-2">регистрация</div>
       			<div class="col-lg-1 col-md-1 col-sm-1">войти</div>
           		<div class="col-lg-2 col-md-2 col-sm-2"></div> 
                <div class="col-lg-5 col-md-5 col-sm-5"></div>
            </div>    
           	    <div class="col-lg-2 col-md-2 col-sm-2">RUS/ENG</div>
    	</div>
    </div>   
</div>
<div class="container">
	  <div class="row"><header class="col-lg-12"></header></div>
            
            <div class="row">
         		<div class="navbar">
         			<div class="container">             
         				<div class="navbar-header"></div>
                    	<div class="collapse navbar-collapse">
                    		<ul class="nav navbar-nav">
                        	<li><a class="navbar-fonts" href="#">ГЛАВНАЯ</a></li>
                        	<li><a class="navbar-fonts" href="#">МУЛЬТИМЕДИЯ</a></li>                                        
                       		<li><a class="navbar-fonts" href="#">СОРЕВНОВАНИЯ</a></li>
                       	 	<li><a class="navbar-fonts" href="#">ИНТЕРНЕТ-МАГАЗИН</a></li>
                       		<li><a class="navbar-fonts" href="#">ФОРУМ</a></li>
                       		<li><a class="navbar-fonts" href="#">КОНТАКТЫ</a></li>
                    		</ul>
                   	   </div>
        			 </div>
         		</div>
         </div>  
        <div class="row main-content">
        	<div class="col-lg-3 col-md-3 col-sm-3 column-left">&nbsp </div>
            <div class="col-lg-9 col-md-9 col-sm-9 column-right"> </div>
        </div></div>
 
    
      
</div>
<footer>
    	<div class="row"></div> 
 </footer>
</div>
</body>


@charset "windows-1251";

@media (min-width: 768px) {
body {
	background-color:rgba(38,184,96,1.00);
}

#menu-top {
	background-color:#140d5b;
	height:28px;
	width:100%;
}
header {
	height:196px;
	background-color:rgba(255,0,4,1.00);
}
.navbar {
	height:50px;
	background-color:#140d5b;
}

.column-left {
	background-color:#BBB;
	opacity:0.7;
}
.column-right {
	background-color:#140d5b;
	opacity:0.7;
}

footer {
	height:130px;
	width:100%;
	background:rgba(20,13,91,0.95);
	margin-top:100px;
}
}
/*Начало выравнивания колонок*/
.column-left, .column-right {
	padding-bottom: 20000px;
	margin-bottom: -20000px;
}
.main-content {
	overflow: hidden;
}
  • Вопрос задан
  • 4804 просмотра
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
cyber-jet
@cyber-jet
давайте код... по фото не гадаем :)
Ответ написан
3 комментария
3 комментария
Tantacula
@Tantacula
Написал большой ответ, все стерлось.

Раз используете footer header, то и меню оборачивайте в nav.
Посмотрите, как на других сайтах используются эти элементы. мне кажется, вы не очень красиво их используете.
У вас лишний закрывающий div под футером.
попробуйте container-fluid вместо container.
когда задаете классы колонок, ставьте их в порядке увеличения разрешения (class="col-xs-12 col-sm-2 col-md-4 col-lg-2"), а не от большего к меньшему. Так читать легче.
Классы колонок наследуются бОльшими разрешениями от меньших. Нет смысла писать col-sm-2 col-md-2 col-lg-2, можно написать только col-sm-2. Так чище.
Везде проставьте col-xs-12, где забыли. Особенно в (про оборачивание сказал выше)
Сверьтесь с дефолтными примерами на сайте бутстрепа, возможно, вы забыли включить вьюпорт в свой head.
Сравните исходные шаблоны бутстрепа со своими на айпаде, возможно, там где вы видите косяк так и задумано.
уберите width:100% везде, где он не нужен. Блочные элементы и так по-умолчанию растягиваются на всю ширину, а ваш стиль потмо случайно встретится с классом бутстрепа и вы не будете понимать, почему конфликт на ровном месте.
Уберите div#all, лишняя обертка на самом деле.
Уберите .column-left, .column-right {
padding-bottom: 20000px;
margin-bottom: -20000px;
}
.main-content {
overflow: hidden;
} Это просто какой-то говнокод.

Мог еще чего-нибудь забыть из удаленного, пускай умные люди напишут.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)
Donatov.net
от 100 000 до 300 000 ₽
Продакт дизайнер в финтех
Module Agency
от 110 000 до 190 000 ₽
Golang developer middle
Posman
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы