Bootstrap 显示弯曲高度答案

【问题标题】：Bootstrap display flex heightBootstrap 显示弯曲高度
【发布时间】：2018-03-31 23:09:23
【问题描述】：

我想从引导程序中创建与导航栏本身高度相同的导航列表。

当前的html：

<nav class="navbar navbar-expand-lg">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link"></a>
            </li>
        </ul>
    </div>
</nav>

结果是这样的：

我想让它看起来像这样：

我目前通过给div.collapse 60 像素的固定高度和ul.navbar-nav.mr-auto、li.nav-item 和a.nav-link 100% 的高度来修复它。问题是这只是一种解决方法，不适用于移动设备等。

通过查看 css，我发现 bootstrap 现在正在使用一种名为 flex 的方法。如何使用 flex 实现这一点？

【问题讨论】：

可以加sn-ps吗

标签： html twitter-bootstrap css flexbox

【解决方案1】：

如果您想保留默认高度，则从父级 (nav-bar) 中删除 padding-top 和 padding-bottom 并将它们添加到子级 (nav-link) 即可解决问题，

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
  }
}

如果您修复了nav-bar 的height，那么为什么不修复children 的height 呢？

.nav-bar{
    height: 60px;
}

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    height: 60px;
  }
}

另一种选择是将parent（nav-bar）的位置设置为relative，将孩子的position设置为absolute和height:100%与top:0

.nav-bar{ 
    height: 60px;
    position: relative;
}

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    position: absolute;
    top: 0;
    height: 100%;
  }
}

这是一个小提琴：https://jsfiddle.net/szuk7not/62/

PS：对于您未来的问题，请考虑添加一个 sn-p、codePen、fiddle 或至少可以工作的html 和css，以便您获得更准确和充分的答案。

【讨论】：