网格系统

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标记，请参阅bootstrap文档以获取进一步的说明

网格系统

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

取自here

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

媒体查询

最小宽度：指大于或等于给定金额的所有内容 最大宽度：指的是小于或等于给定金额的所有内容。

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

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

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

2 个答案:

网格系统

媒体查询