如何在 Bootstrap 移动底部导航栏上设置固定高度

Question

我有一个固定的底部页脚，用作“iphone 风格”的导航栏。

<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
  <div class="row" id="bottomNav">

    <a href="/merchants"><div class="col-xs-4 text-center icon-flag"></div></a>
    <a href="/credits"><div class="col-xs-4 text-center icon-credit"></div></a>
    <a href="/profiles"><div class="col-xs-4 text-center icon-user"></div></a> 

   </div>
</div>

这是原始示例：

http://www.bootply.com/108286#

我对原始代码进行了更改，以使完整的 div 成为链接。我只是将<a> 标签移到了 div 之外。

我遇到的问题是导航栏的高度不够，部分图标放在了导航栏的外面。

我尝试过创建自定义类

.navbar-custom{
   height: 200px;
}

并将其分配给 div：

<div class="col-xs-12 navbar-inverse navbar-fixed-bottom navbar-custom">

它没有工作。也不行：

<div class="col-xs-12 navbar-inverse navbar-fixed-bottom navbar-custom">

有什么想法吗？

更新： 自定义类确实有效。我的错。问题是图标还是固定在行的顶部而不是底部。

Answer 1

您可以尝试将您的 a 添加到导航栏的内部吗？

您可以参考引导示例：

http://getbootstrap.com/components/#navbar

在执行此操作时考虑导航栏 html 的结构。