Bootstrap "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> 

Я попытался добавить хз скрытый в каждый Col-мд DIV, я попытался обертыванием всей вещи в хзе спрятано, я пытался выбирать только определенные части для тестирования и ни одна из них не дала скрытый div в крошечном окне просмотра.

Я тестировал xs-скрытый на совершенно другом элементе сайта, и он работал нормально, но я не могу заставить его работать здесь.

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

Предполагая, что вы используете точки останова бутстрапа по умолчанию, вы можете просто использовать медиа-запросы на ширине экрана, которую вы ищете. Если вы хотите, чтобы применить изменения хз бутстраповских экраны, вы можете использовать следующий вопрос СМИ

@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; 
    } 

} 

Иногда проще использовать медиазапросы вместо классов видимости этот корабль с бутстрапом, главным образом потому, что он предоставит вам гораздо больше настроек.