移动设备上的全宽垂直导航栏

Question

我有一个两列布局。左栏有一个垂直导航栏菜单，可以在较小的屏幕上折叠。有谁知道如何在移动设备的每一侧没有 15px 填充的情况下使其全宽？我知道这个填充来自 .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>

Answer 1

您是否尝试过插入：

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

由于 XS 大小介于 0 到 767 像素之间，因此您可以不使用填充。

干杯！

Answer 2

首先，您有一个错误的 html 标记，请参阅引导文档以获取更多说明

网格系统

• 行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
• 内容应放在列中，并且只有列可以是行的直接子级。

取自here

---

一种解决方案是在行元素中使用另一个类并使用自定义媒体查询删除填充。

媒体查询

Min-Width：指大于或等于给定数量的所有内容。
Max-Width：指小于或等于该数量的所有内容给定的。

col-xs-* : 超小型设备手机 |无需媒体查询 - ( col-sm-* : 小型设备 平板电脑 | @media (min-width: 768px) {} - ( >=768px )
col-md-* : 中型设备桌面 | @media (min-width: 992px) {} - ( >=992px )
col-lg-* : 大型设备桌面 | @media (min-width: 1200px) {} - ( >=1200px )

关于 bootstrap 3 网格选项的信息here