將 Logo 置於導航欄中的中間
[英]position Logo in the middle in NavBar
問題描述
我正在努力將徽標定位在 navbar 的中間，並且元素從左側和右側的徽標散開。 我還想按下導航欄末尾的按鈕。
這是理想的定位在我的代碼中，我嘗試在導航欄內創建兩列。 其中一個占 80% 的寬度，用於存儲 5 個元素，另一個占最后按鈕的 20% 的寬度。 我不確定哪種方法是最好的方法。
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
<ul class=" col-sm-10 navbar-nav justify-content-center">
<li class="nav-item"><a href="#" class="nav-link">Products</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Products</a></li>
<li><img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
<li class="nav-item"><a href="#" class="nav-link">About KLion</a></li>
<li class="nav-item"><a href="#" class="nav-link">News & Updates</a></li>
</ul>
<ul class=" col-sm-1 navbar-nav justify-content-between py-3 ">
<button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
</button>
<button type="button" class="btn">
<img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
</button>
</ul>
</nav>
.navbar-nav > li{
margin-left: 130px;
}
3 個解決方案
解決方案1
1 2020-01-30 09:37:26
我希望這能幫到您
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#" class="nav-link">Products</a></li>
<li class=""><a href="#" class="nav-link">My Products</a></li>
<li><img src="your_img_path" alt="logo" style="width:70px; height:50px;"></li>
<li class=""><a href="#" class="nav-link">About KLion</a></li>
<li class=""><a href="#" class="nav-link">News & Updates</a></li>
<li class="navbar-right"><button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px; ">
</button></li>
<li class="navbar-right" style="margin-right: 20px;"><button type="button" class="btn">
<img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
</button></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
謝謝
解決方案2
0 2020-01-30 09:37:56
你可以試試這個，如果你期待類似的東西，並使用邊距將它放置在樣式塊內的適當標簽中，並使用填充調整按鈕大小。
<html>
<head></head>
<style>
.navbar-nav > a{
margin-left: 50px;
}
img{
margin-left: 50px;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
<div class=" col-sm-10 navbar-nav justify-content-center">
<a href="#" class="nav-link">Products</a></li>
<a href="#" class="nav-link">My Products</a></li>
<img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
<a href="#" class="nav-link">About KLion</a></li>
<a href="#" class="nav-link">News & Updates</a></li>
<button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
</button>
<button type="button" class="btn">
<img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
</button>
</div>
</nav>
</body>
</html>
解決方案3
0 已采納 2020-01-30 09:53:43
.navbar{
display:flex;
flex-direction:row;
justify-content:space-evenly;
width:100%;
}
.navbar ul:first-child{
margin-left:20%;
display:flex;
flex-direction:row;
justify-content:space-between;
width:60%;
}
.navbar ul:last-child{
width:20%;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
搜索框引導程序 4 無法 position 在導航欄中間
[英]Search box bootstrap 4 unable to position in the middle in the navbar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.