我正在使用 Bootstrap 3，并且正在嘗試制作標題導航欄。這是我的代碼：
<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 電子學習產品沒有足夠的空間來正確放置在導航專案的位置。
然而，其他nav-items 有額外的空間（正如我在圖片中提到的）。
所以我需要確保每一個nav-item有足夠所需的基礎上的長度空間<a>的鏈接nav-items。
這里是這個導航欄的 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選單鏈接正確地放置在所需的空間中，以便選單鏈接沒有額外的空間并且沒有足夠的空間？
uj5u.com熱心網友回復：
所以你可以做的是將其設定width為max-content，這將是其中包含的內容的最大寬度。
之前（與width: 130px !important;）：
之后（與width: max-content;）：
.nav-item{
height:30px;
//width:130px !important;
width: max-content;
}
注意：如果你認為它太短，你可以設定一個min-width你喜歡的值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400166.html
標籤：html css 推特引导 twitter-bootstrap-3 bootstrap-3