Question

在移动屏幕尺寸中，导航栏高度过大。

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

但是我不确定如何处理fb链接，我是否添加了Twitter或Instagram链接，因此导航右侧不是空插槽？

其他选项是使用glyphicons用于小屏幕/手机，但我担心最好将实际的电话号码和电子邮件文本显示出来。

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

如果您不希望底部导航栏在移动设备上超过一行，则可以使用glyphicons。您可以尝试使字体非常小，但这会破坏您能够阅读它的目标。

您应该查看Bootstrap的响应式实用程序。 http://getbootstrap.com/css/

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

Answer 2

所以我想我会尝试使用glyphicons，但是现在我已经使用了nest行。它看起来并不好，但也不是那么糟糕。

<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

有关粘性导航页脚（tel email fblink）布局的建议

2 个答案: