У сontainer по умолчанию стоят падинги и маргины.
Я убираю падинги, для того, чтоб растянуть на весь экран изображение. После того как делаю padding: 0; margin: 0
, то появляется горизонтальный скролл.
Помогите разобраться пожалуйста
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуУ сontainer по умолчанию стоят падинги и маргины.
Я убираю падинги, для того, чтоб растянуть на весь экран изображение. После того как делаю padding: 0; margin: 0
, то появляется горизонтальный скролл.
Помогите разобраться пожалуйста
В бутстрапе нужны эти отступы для того, чтобы когда вы делите контент на колонки, между колонками было расстояние, а побокам нет. Вот окрашенный пример для наглядности:
span{
line-height:3;
display:block;
background:rgba(168, 0, 221, 0.5);
}
.wrapper,
.container,
.row,
.col-xs-4{
background:rgba(0, 119, 221, 0.5);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper">
<span>.wrapper</span>
<div class="container">
<span>.container</span>
<div class="row">
<span>.row</span>
<div class="col-xs-4"><span>.col-xs-4</span></div>
<div class="col-xs-4"><span>.col-xs-4</span></div>
<div class="col-xs-4"><span>.col-xs-4</span></div>
</div>
</div>
</div>
Горизонтальная полоса прокрутки появляется потому что .row
имеет отрицательный margin
. Убрав его останутся padding
от .col-**-*
Если хотите убрать отступы вообще, то тогда вам нужно убрать не только padding
у .container
, но и margin
у .row
и padding
у ВСЕХ .col-**-*
P.S. margin
у .cotainer
убирать при этом не нужно, убрав его вы сдвинете весь контент влево, если он окажется меньше экрана.
Попробуйте это:
overflow-x:hidden;
(Уберает горизонтальный )
overflow-y:hidden;
(Уберает вертикальный)
overflow:hidden;
(Уберает все)