如何确定 nav-items 以自动获得所需的完整宽度
How to determine nav-items to get full required width automatically
我正在使用 Bootstrap 3,我正在尝试制作一个 header 导航栏。这是我的代码:
<div class="has-navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active bg-warning first-item m-1">
<a class="nav-link" href="#"><i class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"> <i class="fa fa-graduation-cap"></i>Courses</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-shopping-cart"></i> E-learning products</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-newspaper"></i> Articles</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-calendar"></i> Events</a>
</li>
</ul>
</div>
</nav>
</div>
结果如下所示:
如您所见,菜单 nav-item
E-learning 产品 没有足够的 space 来正确放置 nav-item.
但是其他 nav-item
s 有额外的 space(正如我在图片中提到的)。
所以我需要根据 nav-items
link 的长度,确保每个 nav-item
都有足够的 space。
这里是这个导航栏的 CSS 代码:
/* Navbar */
.has-navbar{
margin-top:-10px;
width:100%;
height:30px;
}
.navbar{
background-color: #fff !important;
height:100%;
}
.nav-item{
height:30px;
width:130px !important;
}
.nav-item a{
font-size:13px;
font-weight: bold;
}
.first-item{
margin-right:-50px !important;
}
所以我在这里尝试将 width:130px !important;
设置为 .nav-item
,但效果不佳。我也试过 width:100%;
结果是这样的:
那么我如何正确地将每个 nav-item
菜单 link 正确地放置在他们需要的 space 中,这样菜单 links 就没有 extra space AND 不够space?
因此,您可以将其 width
设置为 max-content
,这将是其中包含的内容的最大宽度。
之前(width: 130px !important;
):
之后(width: max-content;
):
.nav-item{
height:30px;
//width:130px !important;
width: max-content;
}
注意:如果您认为它太短,您可以将 min-width
值设置为任何您喜欢的值。
我正在使用 Bootstrap 3,我正在尝试制作一个 header 导航栏。这是我的代码:
<div class="has-navbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active bg-warning first-item m-1">
<a class="nav-link" href="#"><i class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"> <i class="fa fa-graduation-cap"></i>Courses</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-shopping-cart"></i> E-learning products</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-newspaper"></i> Articles</a>
</li>
<li class="nav-item bg-warning m-1">
<a class="nav-link" href="#"><i class="fa fa-calendar"></i> Events</a>
</li>
</ul>
</div>
</nav>
</div>
结果如下所示:
如您所见,菜单 nav-item
E-learning 产品 没有足够的 space 来正确放置 nav-item.
但是其他 nav-item
s 有额外的 space(正如我在图片中提到的)。
所以我需要根据 nav-items
link 的长度,确保每个 nav-item
都有足够的 space。
这里是这个导航栏的 CSS 代码:
/* Navbar */
.has-navbar{
margin-top:-10px;
width:100%;
height:30px;
}
.navbar{
background-color: #fff !important;
height:100%;
}
.nav-item{
height:30px;
width:130px !important;
}
.nav-item a{
font-size:13px;
font-weight: bold;
}
.first-item{
margin-right:-50px !important;
}
所以我在这里尝试将 width:130px !important;
设置为 .nav-item
,但效果不佳。我也试过 width:100%;
结果是这样的:
那么我如何正确地将每个 nav-item
菜单 link 正确地放置在他们需要的 space 中,这样菜单 links 就没有 extra space AND 不够space?
因此,您可以将其 width
设置为 max-content
,这将是其中包含的内容的最大宽度。
之前(width: 130px !important;
):
之后(width: max-content;
):
.nav-item{
height:30px;
//width:130px !important;
width: max-content;
}
注意:如果您认为它太短,您可以将 min-width
值设置为任何您喜欢的值。