Как сделать что бы меню в bootstrap в мобильной версии блок прилегал к краям?

Question

[CheGevara]

Есть простая структура:

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-sm-9"> <!-- основной контент -->
              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
             этот блок повторяется неопределенное число раз 
             </div>     
        </div>
     <div class="col-xs-12 col-sm-3"><!-- боковая панель -->		
     </div>
    </div>
</div>

При отображении в мобильном виде есть отступы слева и справа от блоков.
Если отступы убрать (прописать нулевые в своем css) то тогда блоки становятся в притык на десктопе.

Задача: убрать отступы в мобильном виде, должно прилегать к краям экрана (походу падинги у col-xs-12 убрать, но как)

Answer 1

[Дмитрий Кравченко]

@media screen and max-width(320px){
.col-xs-12{
padding: 0;
}
}

Ширину экрана можешь подобрать в зависимости от девайса, под который верстаешь.
Возможно, потребуется !important, чтоб перебить бутстраповские паддинги.

Comments

[CheGevara]

кинул код в свой css. Нет изменений. Судя по devtools Хрома - такое чувство что падинг берется из остальных классов (col-sm-6 col-md-6 col-lg-4) https://yadi.sk/i/A983iGMFiWTrL

[CheGevara]

вот так заработало:

media (max-width: 768px){
.col-xs-12{
padding: 0;
}
}