引导"hidden-xs"不起作用 + 无法为小视口制作粘性页脚

Question

我有一个世界的问题，试图使我的页脚粘在页面的底部较小的视口，所以作为一个创可贴，我只是玩周围隐藏div所有在一起，直到我可以得到它排序。

HTML

<div class="sitefooter">
  <div class="container">
    <div class="row">
        <div class="col-md-4">
        code
        </div>
        <div class="col-md-2 col-md-offset-1">
        code
        </div>
        <div class="col-md-2 col-md-offset-1">
        code
        </div>
    </div>
    <div class="row top20">
        <div class="col-md-4 col-md-offset-4 col-xs-6" style="text-align:center;">
        code
        </div>
        <div class="col-md-4 col-xs-6" style="text-align:right;">
        code
        </div>
    </div>
   </div>
</div>  

我试过在每个cold -mddiv中添加x -hidden，我试过在x -hidden中包装整个东西，我试过只挑选某些部分进行测试，没有一个在一个小视窗中产生一个隐藏的div。

我在网站的一个完全不同的元素上测试了xs-hidden，它工作得很好，但我不能让它在这里工作。

CSS

.sitefooter {
bottom: 0;
position:absolute;
background:url(../img/headerbg.png);
width: 100%;
height:287px;
padding-bottom:20px;
}
.sitefooter>.container>.row>.col-md-3>p, .sitefooter>.container>.row>.col-md-4>p, .sitefooter>.container>.row>.col-md-2>p {
font-size:14px;
padding-top:10px;
color:#CCC;
padding-bottom:15px;
}

.sitefooter>.container>.row>.col-md-3>h3, .sitefooter>.container>.row>.col-md-4>h3, .sitefooter>.container>.row>.col-md-2>h3 {
font-size:20px;
padding-top:20px;
color:#408af0;
}
.sitefooter>.container>.row>.col-md-3>a, .sitefooter>.container>.row>.col-md-4>a, .sitefooter>.container>.row>.col-md-2>a {
color:#999;
font-size:14px;
}
.sitefooter>.container>.row>.col-md-3>a:hover, .sitefooter>.container>.row>.col-md-4>a:hover, .sitefooter>.container>.row>.col-md-2>a:hover {
color:#fff;
font-size:14px;
}
.top20 { margin-top:20px; }

最终，期望的状态是在所有视图端口上都有一个粘性页脚，但这将是一个OK的折衷方案。

有人能看出我在这里做错了什么吗?

Answer 1

假设您正在使用默认的引导断点，您可以在您正在寻找的屏幕宽度上使用媒体查询。如果您希望将更改应用于xs的引导屏幕，可以使用以下媒体查询

@media only screen and (min-width : 480px) {
     // Code Here
}

如果你想让页脚贴在xs屏幕的底部，只需使用:

@media only screen and (min-width : 480px) {
    .sitefooter {
        position: fixed;
        bottom: 0;
    }
}

如果你想在相同的屏幕宽度下隐藏整个页脚，你可以使用:

@media only screen and (min-width : 480px) {
    .sitefooter {
        display: none;
    }
}

有时使用媒体查询比使用bootstrap附带的可见性类更容易，主要是因为它将为您提供更多的自定义