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

Question

Navbar高度在移动屏幕大小中变得太大。

链接到网站

我已经看到了Nav页脚的一些教程和演示，但是大多数是最小内容，即1条文本或很多内容，这些内容不合适，因为我想保持页脚高度低。我见过的选项；使用bootstrap行x2电话x1行X1行

但是我不确定如何处理FB链接，我是否添加了Twitter或Instagram链接，因此NAV右侧没有空的插槽？

其他选项是将字形用于小屏幕/手机，但我担心最好拥有实际电话：可见数字和电子邮件文本。

html

    <div class="container">
              <ul>
                <li><a href="tel:[phone]">[phone]</a></li>
                <li><a href="mailto:[e-mail]">[e-mail]</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

如果您不希望底部的纳维尔（Navbar）在移动设备上不止一行，那么字形是必经之路。您可以尝试使字体非常小，但这将击败您能够阅读的人的目标。

您应该研究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:[phone]">[phone]</a>
                        </div>
                    </div>
                    <div class="footerrow row">
                        <div class="footerleft col-xs-12">
                            <a href="mailto:[e-mail]">[e-mail]</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;
}

结果