html - 需要有关粘性导航页脚(电话电子邮件fblink)布局的建议

Question

导航栏高度在移动屏幕尺寸下太大。

link to site

我看过一些导航页脚的教程和演示，但大多数都是针对最少的内容，即 1 行文本或大量不适合的内容，因为我想保持较低的页脚高度。我见过的选项； 使用 Bootstrap 行 x2 x1 排电话 x1 行用于电子邮件

但是我不确定如何处理 fb 链接，我是否添加 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/

这样您就可以在全尺寸屏幕上显示链接，但在屏幕较小时隐藏它们并显示字形图标。