Bootstrap 4 导航链接高度答案

【问题标题】：Bootstrap 4 Nav-Links HeightBootstrap 4 导航链接高度
【发布时间】：2018-07-24 06:23:19
【问题描述】：

如何在 Bootstrap 中自定义导航链接的高度？

网站：www.mastertraf.net 如果我设置一个高度，它不会占据导航栏的全部高度。

CSS 代码：

  .navLogo {
    width: 15%;
    height: 100%;
   }

  .navbar {

 }

.navbar-dark {
 background-color: rgba(0, 0, 0, 0.5);
}

  .navbar-dark .navbar-brand {
  color: #000000;
   }

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
color: #000000;
 }

.navbar-dark .navbar-nav .nav-link {
  color: #000000;
  -webkit-transition: background-color 0.5s ease-out;
 -moz-transition: background-color 0.5s ease-out;
 -o-transition: background-color 0.5s ease-out;
 transition: background-color 0.5s ease-out;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-   link:focus 
{
 color: #FFFFFF!important;
  background-color: rgba(0, 0, 0, 0.5);
 border-bottom: 2px solid #FF8401;
}

 .navbar-dark .navbar-nav .nav-link.disabled {
  color: #000000;
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
 border-bottom: 2px solid #FF8401;

 }

 .navbar-dark .navbar-toggler {
 color: rgba(255, 255, 255, 0.5);
 border-color: rgba(255, 255, 255, 0.1);
 }

.navbar-dark .navbar-toggler-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }

.navbar-dark .navbar-text {
 color: #000000;
}

.navbar-dark .navbar-text a {
color: #000000;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
color: #000000;
}

【问题讨论】：

在这里创建一个工作演示或为您的问题创建一个小提琴。
我只想知道如何设置导航链接的高度。为什么我需要为此创建一个小提琴？你要么知道，要么不知道。

标签： twitter-bootstrap css twitter-bootstrap-3 twitter-bootstrap-4

【解决方案1】：

您只需要专注于导航链接填充：

.navbar-nav .nav-link{
padding:.5rem 1rem;
}

这是最初的样子。如果你想增加身高的外观。只是。玩padding: /*yourvalue*/.rem 1rem;

为导航栏设置高度不是一个好习惯。因为在折叠时导航栏不会显示任何菜单。如果值是固定宽度。

【讨论】：