совет на липкой навигационной колонтитуле (тел. По электронной почте fblink) макет нужен

Question

Высота навигатора становится слишком большой в размере мобильного экрана.

link to site

Я видел несколько учебников и демо для навигационных колонтитулы, но большинство из них либо для минимального содержания, т.е. 1 строки текста или большим количеством контента, который не подходит, как я хочу, чтобы держать футер высота низкий. Варианты, которые я видел; использования Bootstrap строка x2 x1 строка для телефона x1 строки для электронной почты

, но тогда я не знаю, что делать со ссылкой фба, я добавить ссылку в Twitter или Instagram, так что это не пустой слот на право на море?

другой вариант - использование глификонов для небольших экранов/мобильных телефонов, но я беспокоюсь, что всегда лучше видеть фактический номер телефона и номера электронной почты.

HTML

<div class="container"> 

       <ul> 
       <li><a href="tel:+33-627-385-646">+33 (0) 6 27 38 56 46</a></li> 
       <li><a href="mailto:massage@progressionski.com">massage@progressionski.com</a></li> 
       </ul> 

        <div class="fblink"><a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" target="_blank" class="fa fa-facebook-square fa-3x pull-right"></a> <!-- nav foot right items FB #x2 --> 
        </div> 

    </div><!-- close container --> 

Я спрашиваю потому, что он всегда берет меня возрастов, чтобы получить небольшие изменения работы. Любые советы или ссылки на полезные демонстрации/учебники были бы весьма полезны.

Answer 1

Если вы не хотите, чтобы ваш нижний навигатор был более чем одной линией на мобильном телефоне, глификоны - это путь. Вы могли бы попытаться сделать шрифт очень маленьким, но это победит вашу цель человека, способного его прочитать.

Вы должны изучить ответные утилиты Bootstrap. http://getbootstrap.com/css/

Таким образом, вы можете иметь ссылки, написанные на полноразмерном экране, но скрыть их и показать глификоны вместо этого, когда экран меньше.

Answer 2

Так что я думаю, что попробую глификоны, но пока я использовал строки гнезда. Это не выглядит великолепно, но это не так уж плохо.

<nav class="navbar navbar-default navbar-fixed-bottom"> 

    <div class="container"> 

      <div class="footerrow row"><!-- 1st/main row --> 
       <div class="footerleftcontainer col-xs-10"><!-- open left col --> 
        <div class="row"> 
         <div class="footerleft col-xs-12"> 
          <a href="tel:+33-627-385-646">+33 (0) 6 27 38 56 46</a> 
         </div> 
        </div> 
        <div class="footerrow row"> 
         <div class="footerleft col-xs-12"> 
          <a href="mailto:massage@progressionski.com">massage@progressionski.com</a> 
         </div> 
        </div> 
       </div><!-- close left col --> 
       <div class="col-xs-2"><!-- open right col --> 
        <div class="fblink"><a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" target="_blank" class="fa fa-facebook-square fa-3x"></a></div> 
       </div><!-- close right col --> 
      </div><!-- colse 1st/main row --> 

    </div><!-- close container --> 

.footerrow { 
    padding: 0px; 
    border: 0px; 
    margin: 0px; 
} 

.footerleftcontainer { 
    padding-top: 5px; 
    border: 0px; 
    margin: 0px; 
} 

.fblink { 

    float: right; 
} 

.fblink a { 
    padding-top: 5px; 
} 

.fblink a:active { 
    position: relative; 
    bottom: 2px; 
} 

Result