Question

如何在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;
}

Answer 1

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

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

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

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

Bootstrap 4 Nav-Links高度

1 个答案: