У меня двухколоночный макет. В левом столбце есть вертикальное меню навигационной панели, которое можно сворачивать на экранах меньшего размера. Кто-нибудь знает, как сделать его полноразмерным без отступов 15 пикселей с каждой стороны на мобильных устройствах? Я понимаю, что это заполнение происходит от классов .col-, но если я изменю его на 0px, то макет на больших экранах станет уродливым, без пробелов.

<div class="container">
    <div class="row">       
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <nav class="navbar navbar-default" role="navigation">
                <button type="button" class="btn btn-primary btn-lg btn-block visible-xs" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"><i class="fa fa-lg fa-bars"></i> Menu</button>
            <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
            some content here
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            <div class="row">
                <div class="col-sm-4 col-lg-4 col-md-4">
                 some content here
                </div>
                <div class="col-sm-4 col-lg-4 col-md-4">
                some content here
                </div>
                <div class="col-sm-4 col-lg-4 col-md-4">
                some content here
                </div>
            </div>
        </div>
    </div>
</div>
0
Kaori 11 Апр 2016 в 18:30

1 ответ

Лучший ответ

Вы пробовали вставить:

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

Поскольку размер XS составляет от 0 до 767 пикселей, вы не можете использовать для них отступы.

Ура!

0
Ilija Lončarević 11 Апр 2016 в 15:51