Html 禁用类，但不禁用较小设备上的内容

我有一个粘贴侧边栏，当页面从较小的屏幕打开时，我会将其隐藏，但当我添加主要内容时，它会隐藏在侧边栏后面，因此我会添加左边距：200px；在内容上，现在它可以在大屏幕上正常工作，但当我从小屏幕上打开页面时，我得到了非常薄的内容

这是我的侧边栏

    <div class="main-nav">
<div class="row">
<div class="hidden-xs visible-sm visible-md visible-lg">
    <div class="col-md-2 affix">
        <div class="list-group">
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-dollar"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-users"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-dashboard"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-unlock"> </i> Lorem Ipsum</a>
        </div>
    </div>
</div>
</div>

}

这是我主要内容的一部分

pastebin com 7mxAzDTi

css

.main-nav {
margin-left: 10px;
margin-right: 10px;

.main-content {
margin-left: 220px;
margin-right: 10px;
min-height: 800px;

---

}

您没有给我们您想要的结果。。。。我可以想象，你会想使用内置的引导网格系统来改变它，这样在小型设备上，它可以扩展屏幕的全宽，然后内容移动到下面。这都是假设，虽然你没有说明你想要什么。对不起，这是我想要的结果，我用的是左边的边距：220px；在内容上，因为如果我不这样做的话，侧边栏就隐藏在大屏幕上的内容下面，而不是这个，你可能忘记了将小屏幕上的

左边距：220px

减少到10px或其他一些东西，添加

@媒体屏幕和（最大宽度：800px）{.main内容{左边距：0；宽度：100%；}

修复了该问题