Question

我有一个问题的世界试图让我的页脚粘在较小视口的页面底部，所以作为一个bandaid我正在玩，只是将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>

我尝试将xs-hidden添加到每个col-md div中，我尝试将整个事物包装在xs-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; }

最终，所需的状态是所有视图端口上的粘性页脚，但这可能是一个妥协。

有谁能看到我在这里做错了什么？

Answer 1

假设您使用的是默认的bootstrap断点，您可以在您正在寻找的屏幕宽度上使用媒体查询。如果要将更改应用于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＆＃34; hidden-xs＆＃34;不工作+无法为小视口制作粘性页脚

1 个答案: